node.js - 如何设置 Gruntfile.js 以监视 SASS（指南针）和 JS

Question

我是使用 gruntjs 和 nodejs 的新手。我想知道如何设置 gruntfile 以便它同时监视 sass 文件和使用 watch 编译的 js 文件。

这是我到目前为止所拥有的：

module.exports = function ( grunt ) {

  "use strict";
  require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      dist: {
        options: {
          config: 'config.rb',
          watch: true
        }
      }
    }
  });

  grunt.registerTask('default', []);

};

任何帮助都感激不尽。谢谢！

Answer 1

试试grunt-contrib-watch和grunt-contrib-sass。它们都是专门针对这种事情的 Grunt 插件：

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'css/build/global.css': 'scss/screen.scss'
            }
        } 
    },


    watch: {

        css: {
            files: ['scss/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false
            }
        } 
    },

上面的监视插件配置将监视任何.scss文件中的更改，并将运行sass任务（也在上面定义）。你甚至可以通过这种方式连接到 livereload。还可以有多个watch（上面只定义了一个csswatch）；使用grunt-contrib-uglify创建第二个手表来缩小 JS 会很容易

我有一个示例，您可以查看它也连接 JavaScript 并使用 grunt-contrib-uglify 进行一些缩小。这是示例。