grunt 入门实践实记

在Javascript的 开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务。

sudo npm install grunt-cli -g //grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。

npm install //这种方法是针对已有package.json的情况

npm init  //如果想要自动生成package.json文件，可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

npm install <module> --save-dev  //已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入package.json文件。

以下是同时监控sass和js 实例

package.json

{
  "name": "common.min",
  "title": "js files",
  "version": "0.0.0",
  "copyright": "2015",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-sass": "*",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-contrib-concat": "*"
  }
}

实例gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Metadata.
        meta: {
            basePath: '',
            srcPath: '../sass/',
            deployPath: '../css/'
        },
        concat: {
            js: {
                src: ['src/**/*.js'],
                dest: '<%= pkg.name %>.js'
            }
        },
        sass: {
            dist: {
                files: {
                    '<%= meta.deployPath %>common.css': '<%= meta.srcPath %>common.scss'
                },
                options: {
                    style: 'compact'
                }
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            build: {
                src: '<%=pkg.name %>.js',
                dest: '<%= pkg.name %>.js'
            }
        },
        // jshint: {
        //     options: {
        //         eqeqeq:false,
        //         trailing:false
        //     },
        //     files: ['Gruntfile.js', 'src/**/*.js']
        // },
        watch: {
            scripts: {
                files: ['<%= meta.srcPath %>/**/*.scss', '**/*.js'],
                tasks: ['sass', 'concat', 'uglify'],
                options: {
                    livereload: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');

    //grunt.registerTask('check', ['jshint']);
    grunt.registerTask('default', ['sass', 'concat', 'uglify', 'watch']);
};