以前都是装了 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 文件都会被编译,请问如何设置才能只编译当前改动的文件?
添加回答
举报
0/150
提交
取消