yujiangshui / gruntxx

Grunt 新手一日学会 配套实验项目

Hi there 👋

I'm Harry Yu. Live in 80s Metaverse, work as a full stack developer (React family, Node.js, Ruby, GraphQL, etc).

Worked at Alibaba, and worked on the ICE project as the PM.

gruntxx's Issues

新手

怎么用github学习项目

grunt 如何自动编译当前被修改的Sass文件？

文章很详实，感谢分享！有个问题向您请教：
我在项目里用了Grunt，想以此实现自动化编译被修改的 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 文件都会被编译，请问如何设置才能只编译当前改动的文件？