如何设置Gruntfile.js来监视SASS（指南针）和JS [英] How to setup Gruntfile.js to watch for SASS (compass) and JS

问题描述

我是使用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'），
指南针：{
 dist：{
选项：{
 config：'config.rb'，
 watch：true 
} 
} 
} 
}）; 
 
 grunt.registerTask（'default'，[]）; 
 
}; 
  

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

> grunt-contrib-watch 与 grunt-contrib-sass 。它们都是专门用于这种事情的Grunt插件：

  sass：{
 dist：{
选项：{
 style：'compressed'
}，
 files：{
'css / build / global.css'：'scss / screen.scss'
 
} 
}，
 
 
观看：{
 
 css：{
 files：['scss / * .scss']，
任务：['sass']，
 options：{
 spawn：false 
} 
} 
}，
  

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

我有一个例子，你可以看看它也连接了JavaScript，并用grunt-contrib-uglify做了一些缩小。 下面是例子。

I'm new to using gruntjs and nodejs. I wanted to know how can I setup the gruntfile so that it watches both the sass files and the js files compiles using watch.

This is what I have so far:

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', []);

};

Any help will be much appreciated. Thank you!

解决方案

Try grunt-contrib-watch with grunt-contrib-sass. They're both Grunt plugins specifically for this kind of thing:

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


    watch: {

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

The watch plugin configuration above will watch for changes in any .scss files, and will run the sass tasked (also defined above). You can even hook into livereload this way. You can also have multiple watches (the above only defines a css watch); creating a second watch to minify JS would be easy with grunt-contrib-uglify

I have an example you can look at that also concatenates JavaScript and does some minification with grunt-contrib-uglify. Here is the example.

这篇关于如何设置Gruntfile.js来监视SASS（指南针）和JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！