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

【问题标题】：How to setup Gruntfile.js to watch for SASS (compass) and JS如何设置 Gruntfile.js 来监视 SASS（指南针）和 JS
【发布时间】：2014-03-18 12:28:46
【问题描述】：

我是使用 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', []);

};

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： node.js sass gruntjs grunt-contrib-watch

【解决方案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。也可以有多个手表（上面只定义了一个css手表）；使用grunt-contrib-uglify 创建第二个手表来缩小 JS 会很容易

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

【讨论】：