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-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

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

1 个答案: