如何设置Gruntfile.js来观察SASS(指南针)和JS

Question

我是新手使用gruntjs和nodejs.我想知道如何设置gruntfile,以便它使用watch监视sass文件和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-sass一起使用grunt-contrib-watch.它们都是专门用于这种事情的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进行一些缩小.这是一个例子.