Grunt 的使用

基本使用

1. 创建 package.json，在vs code 终端输入  yarn init --yes
   
   
2.  添加 grunt 模块， 在vs code 终端输入 yarn add grunt （注意：提前把 grunt-cli 安装好再执行此命令，全局安装：yarn install -g grunt-cli 或 npm install -g grunt-cli）
   
   
3. 在根目录添加 gruntfile.js 文件，在vs code 终端输入 code gruntfile.js ，用于定义一些 Grunt 自动执行的任务
   
   
4. 在vs code 终端输入 yanrn grunt foo 
   
   

Grunt 标记任务失败 ：return false 或者 done(false)

module.exports = grunt => {    
    //标记任务失败
    grunt.registerTask('bad',  function() {
        console.log('bad')
        return false
        //done(false)
    })
}

 Grunt 的配置方法

module.exports = grunt => {
    grunt.initConfig({
        foo: {
            bar:123
        }
    })
    grunt.registerTask('foo', () => {
        console.log(grunt.config('foo.bar'))
    })
}

 Grunt 多目标任务

 在终端命令： yarn grunt build:css

module.exports = grunt => {
    grunt.initConfig({
        build: {
            css:'1',
            js:'2'
        }
    })

    //多目标模式 可以让任务根据配置形成多个子任务
    grunt.registerMultiTask('build', function () {
        console.log(`target: ${this.target}, data: ${this.data}`)
    })
}

 

Grunt 插件的使用 

在终端命令：yarn add  grunt-contrib-clean --save dev  //安装clean 任务

module.exports = grunt => {
    grunt.initConfig({
        clean: {
           temp:'temp/**'
        }
    })


    grunt.loadNpmTasks('grunt-contrib-clean')
}

在终端命令： yarn grunt clean

 Grunt 常用插件及总结 

下面简单对一些常用插件做个介绍

1.    grunt-contrib-clean (v0.5.0)

清理文件或文件夹

2.    grunt-contrib-coffee (v0.7.0)

编译coffee文件为javascript文件

3.    grunt-contrib-compass (v0.6.0)

采用compass方式编译sass文件

4.    grunt-contrib-compress (v0.5.2)

压缩文件或文件夹

5.    grunt-contrib-concat (v0.3.0)

文件拼接（可将多个文件合并到一个文件）

6.    grunt-contrib-copy (v0.4.1)

复制文件或文件夹

7.    grunt-contrib-cssmin (v0.6.2)

压缩CSS文件

8.    grunt-contrib-csslint (v0.1.2)

CSS文件语法检查

9.    grunt-contrib-htmlmin (v0.1.3)

压缩HTML文件

10. grunt-contrib-imagemin (v0.3.0)

PNG、JPEG图片压缩（保证质量压缩）

11. grunt-contrib-jshint (v0.6.4)

JS语法检查

12. grunt-contrib-less (v0.7.0)

将LESS编译成CSS

13. grunt-contrib-sass (v0.5.0)

把SASS编译成CSS

14. grunt-contrib-stylus (v0.8.0)

把Stylus文件编译成CSS

15. grunt-contrib-uglify (v0.2.4)

用UglifyJS方式压缩JS文件

16. grunt-contrib-watch (v0.5.3)

实时监测文件的增删改状态，状态改变时自动执行预定义任务

17. grunt-contrib-yuidoc (v0.5.0)

编译YUIDoc文档

18. grunt-contrib-connect (v0.5.0)

启动一个web服务器连接

19. grunt-contrib-jade (v0.8.0)

编译Jade模版

20. grunt-contrib-handlebars (v0.5.11)

预编译Handlebars模板到JST文件（Handlebars：结合json数据的模版）

21. grunt-contrib-jasmine (v0.5.2)

通过PhantomJS运行jasmine（PhantomJS：JS单元测试）

22. grunt-contrib-jst (v0.5.1)

预编译Underscore模板到JST文件（Underscore：JS工具库）

23. grunt-contrib-nodeunit (v0.2.1)

运行Nodeunit单元测试（NodeUnit：Node.js单元测试框架）

24. grunt-contrib-qunit (v0.3.0)

用PhantomJS对象运行QUnit单元测试

25. grunt-contrib-requirejs (v0.4.1)

更多插件：请翻阅http://gruntjs.com/plugins（英文版）

Grunt 已退出历史舞台，这里可以作为了解