以前都是装了 Ruby 后用命令行编译 Sass 的,感觉太 Low,所以最近刚切换到 Grunt(还是很 Low 嘛,好吧……),想以此实现自动化编译被修改的 Sass 文件。
Grunt package.json 内容如下:
{ "name": "grunt sass demo", "version": "1.0.0", "devDependencies": { "grunt": "*", "grunt-contrib-watch": "*", "grunt-contrib-sass": "*" } }
Gruntfile.js 内容如下:
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), meta: { basePath: '../', srcPath: '../assets/sass/', // 源码 deployPath: '../assets/css/' // 编译输出 }, banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ', sass: { dist: { options: { sourcemap: 'auto', style: 'compressed' }, // 这样写不起作用 // files: { // src: '<%= meta.srcPath %>*.scss', // dest: '<%= meta.deployPath %>*.css' // } // 这样只能编译特定的文件 // files: { // '<%= meta.deployPath %>test1.css': '<%= meta.srcPath %>test1.scss' // } // 使用字典匹配 files: [{ expand: true, cwd: '<%= meta.srcPath %>', src: ['*.scss'], dest: '<%= meta.deployPath %>', ext: '.css' }] } }, watch: { scripts: { files: ['<%= meta.srcPath %>*.scss'], tasks: ['sass:dist'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); };
然后运行 grunt watch 开启监视模式,当我修改 srcPath/sass/ 下的任一个 Sass 文件时,当前整个目录下的 Sass 文件都会被编译,请问如何设置才能只编译当前改动的文件?