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插件的功能。
补充
- gulp-autoprefixer:使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。。使用它不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】