grunt-contrib-sass 如何自动编译当前被修改的Sass文件?

以前都是装了 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 文件都会被编译,请问如何设置才能只编译当前改动的文件?

WingMeng
浏览 1716回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP