如何設置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-watch與grunt-contrib-sass。他們都是咕嚕插件專門爲這種事情：

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手錶）;創建第二個手錶來縮小JS將很容易與grunt-contrib-uglify

我有一個例子，你可以看看，也連接JavaScript並用grunt-contrib-uglify做一些縮小。 Here is the example。