前端自动化工具grunt搭建一个新项目(一)

定了接下来的学习路线。
打算先学自动化工具：gulp+webpack+bower，其中gulp和webpack是用于打包，bower用于装包。
之后是服务器端的nodeJS+mongDB，再是模块管理如npm、es6，seaJS，学长叫我不要再学requireJS说快被淘汰了。
最后研究框架，react和Angular，目前已经学过vueJS，入了点门尝到了甜头。

详细文档请参考：http://www.gruntjs.net/getting-started

• 创建一个项目，建立一个app文件夹，内创建一个index.html和js文件夹含有index.js文件。
• 命令行运行npm init 会生成一个package.json文件
• 运行npm install grunt --save-dev， 运行grunt并且将其存入dev中
• 安装load-grunt-tasks和time-grunt
  npm install load-grunt-tasks --save-dev npm insyall time-grunt --save-dev
• 创建gruntfile.js文件：vim gruntfile.js
• 编写gruntfile.js文件

'use strict'//使用es5的严格格式
module.exports = funtion(grunt){
    //引入文件
    require('load-grunt-tasks')(grunt);
    require('time-grunt')(grunt);
    var config = {
        app:'app',
        dist:'dist'
    }
    grunt.initConfig({
        config:config
    });}```

- 安装grunt-contrib-copy和clean。一个用于复制一个用于删除。
`npm install grunt-contrib-copy --save-dev`
`npm install grunt-contrib-clean --save-dev`
- 在initConfig（{}）中添加：

copy:{
dist:{
src: '<%= config.app %>/index.html',
dest: '<%= config.dist %>/index.html'
}
},

    clean:{
        dist:{
            src:'<%= config.dist %>/index.html'
        }
    }

src是源文件，dest是目标文件。src不仅支持以上格式，同样支持数组格式，这部分内容在文章顶部的中文文档中有说明，我就不细写了。其中有一种files格式，形成一个数组或者是键值对，如

copy:{
files:{
' 目标文件 '：'源文件'，
' 目标文件 '：['源文件数组']
}
}

但以上格式不支持额外参数，如果需要支持额外参数，需要写成`file:[{  }]`形式
  1. 此处还有一部分学习内容为过滤器，更多内容可以在中文文档中找到：
![](https://img.haomeiwen.com/i13735/46fa62219134cbba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  2. 以及执行过程中有一些想要避开的操作，可以用一个额外参数filter，filter既可以使用isFile这种status也可以自己定义function
  3. 另一个额外参数叫dot，当dot配置项的值为true，会同时名中以点为开头的文件
  4. 一个额外参数叫matchBase，当其为true时，只匹配basename（如false时会匹配到abc文件和abc文件子文件，为true时，只匹配到abc文件）
  5. expand，为true时处理动态的src到dest之间的映射
![](https://img.haomeiwen.com/i13735/9ed031ac4e2901ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如图，cwd代表的是相对于src的一个目录，ext表示执行后对文件名的修改，extDot表示从何处开始修改，可以设定为’first‘，表示当遇到index.max.html，生成的是index.min.html，指定为last时，表示将最后一个点后面的内容作为extension。flatten为true时去掉中间各层目录，rename在ext和extDot后执行
- 编写完copy和clean以后，可以在命令行中使用grunt copy和grunt clean调用执行task