构建工具：grunt、Glup、webpack

相关代码已上传至github

怎么是项目构建？

1. 编译项目中的js, sass, less；
2. 合并js/css等资源文件；
3. 压缩js/css/html等资源文件；
4. JS语法的检查。

构建工具的作用?

简化项目构建, 自动化完成构建。

构建工具

grunt、gulp、webpack

grunt

1.官网：https://www.gruntjs.net/

2.参考文档：http://www.cnblogs.com/wangfupeng1988/p/4561993.html

3.常用的插件:

1. * grunt-contrib-clean——清除文件(打包处理生成的)
2. * grunt-contrib-concat——合并多个文件的代码到一个文件中
3. * grunt-contrib-uglify——压缩js文件
4. * grunt-contrib-jshint——javascript语法错误检查；
5. * grunt-contrib-cssmin——压缩/合并css文件
6. * grunt-contrib-htmlmin——压缩html文件
7. * grunt-contrib-imagemin——压缩图片文件(无损)
8. * grunt-contrib-copy——复制文件、文件夹
9. * grunt-contrib-requirejs**——合并压缩requirejs管理的所有js模块文件
10. * grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

gulp

1.官网：https://www.gulpjs.com.cn/

2.相关插件:

• * gulp-concat : 合并文件(js/css)
• * gulp-uglify : 压缩js文件
• * gulp-rename : 文件重命名
• * gulp-less : 编译less
• * gulp-clean-css : 压缩css
• * gulp-livereload : 实时自动编译刷新
• * 重要API
• * gulp.src(filePath/pathArr) :
• * 指向指定路径的所有文件, 返回文件流对象
• * 用于读取文件
• * gulp.dest(dirPath/pathArr)
• * 指向指定的所有文件夹
• * 用于向文件夹中输出文件
• * gulp.task(name, [deps], fn)
• * 定义一个任务
• * gulp.watch()
• * 监视文件的变化

webpack

1.https://www.webpackjs.com/

2.http://guowenfh.github.io/2016/03/24/vue-webpack-01-base

3.https://github.com/onface/webpack-book

4.https://www.jianshu.com/p/bb48898eded5

之前写过一篇关于webpack：https://www.cnblogs.com/zhengyeye/p/9260235.html

End

grunt与gulp指令大同小异，只是看自己喜好使用；

webpack其实更流行。