前端构建工具

Gulp构建工具

常用的组件

”devDependencies”: {
“gulp”: “*”, // 基础
“gulp-if”: “*”, // 根据不同的环境，切换方法

"gulp-util": "*",             // 如果有自定义方法，可能会用到
"gulp-clean": "*",            // 清理路径下文件
"gulp-rename": "*",           // 重命名文件，比如上节提到 _ 需要还原回去
"gulp-concat": "*",           // 文件合并

"gulp-esLint": "*",           // 查Javascript编程时的语法错误码
"gulp-browserify": "*",       // 利用 CommonJS 的格式，直接让浏览器也能用类似的方式
"gulp-uglify": "*",           // 替换压缩

"gulp-jade": "*",             // jade
"gulp-stylus": "*",           // stylus

"gulp-mocha": "*",            // 测试框架
"chai": "*",
"jscov": "*",

"gulp-changed": "*"           // 有变化的才操作，没变化的就跳过，可进一步优化效率

}

gulp和webpack的区别

gulp

gulp强调的是前端开发的工作流程，侧重于前端开发的整个过程的控制管理（像是流水线）,我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。
PS：简单说就一个Task Runner

gulp执行任务的顺序

gulp执行多个任务时是异步的，所有任务并行执行
如果控制那些任务并行执行，那些任务串行执行，可以采用如下方法：
1. 给每一个需要依赖其他任务的任务写依赖：eg1:任务style依赖任务compass的执行结果时如下：
gulp.task('style',['compass'],function(){});
2. 使用插件——gulp-sequence
var runSequence = require('gulpSequence');
gulp.task('prod', function(cb) {
runSequence('clean', 'compass', ['image', 'style', 'html'], 'ftp')（cb）;
});
3. gulp的当前最新、未正式发布版本gulp 4.0也提供了新的API(series、parallel)来解决这个问题。

gulp.task(‘prod’, gulp.series(‘clean’, ‘compass’, gulp.parallel(‘image’, ‘style’, ‘html’), ‘ftp’));

---

webpack

webpack是一个前端资源模块化管理和打包工具，更侧重模块打包.我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
PS：webpack is a module bundle

PS:我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

补充

1. gulp-autoprefixer：使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。。使用它不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】