前端自动化构建工具--Gulp&&Webpack

　　前端构建工具的做用能够认为是对源项目文件或资源进行文件级处理，将文件或资源处理成须要的最佳输出结构和形式。

　　在处理过程当中，咱们能够对文件进行模块化引入、依赖分析、资源合并、压缩优化、文件嵌入、路径替换、生成资源包等多种操做，这样就能完成不少本来须要手动完成的事情，极大地提升开发效率。

1、Gulp

　　Gulp 是一个基于流的自动化构建工具。除了能够管理任务和执行任务，还支持监听文件、读写文件。Gulp 被设计的很是简单，只经过下面5个方法就能够支持几乎全部构建场景：

• 经过 gulp.task 注册一个任务；
• 经过 gulp.run 执行任务；
• 经过 gulp.watch 监听文件变化；
• 经过 gulp.src 读取文件；
• 经过 gulp.dest 写完文件。

Gulp 最大的特色是引入了流的概念，同时提供了一系列经常使用插件去处理流，流能够在插件之间传递，大体使用以下：

// 引入 Gulp
var gulp = require("gulp");
// 引入插件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
....
// 新建SCSS任务
gulp.task('scss', function() {
    // 读取文件，经过管道喂给插件
    gulp.src('./scss/*.scss')
        // SCSS 插件将 scss 文件编译成 css
        .piple(sass())
        // 输出文件
        .piple(guilp.dest('./css'));
});
// 合并压缩 JavaScript 文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .piple(concat('all.js'))
        .piple(uglify())
        .piple(gulp.dest('./dest'));
});
// 监听文件变化
gulp.task('watch', function() {
    // 当 SCSS 文件被编辑时执行 SCSS 任务
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

　　优势：好用又不失灵活，既能够单独完成构建，也能够和其余工具搭配使用。

　　缺点：和Grunt 相似。集成度不高，要写不少配置后才能够用，没法作到开箱即用。

2、Webpack

　　Webpack 是一个打包模块化的JavaScript的工具，在Webpack里一切文件皆模块，经过 loader 转换文件，经过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专一于构建模块化项目。

　　一切文件，如JavaScript、CSS、SCSS、图片、模板，对于Webpack 来讲都是一个个模块，这样的好处是能清晰地描绘各个模块之间的依赖关系，以方便Webpack进行组合和打包，通过Webpack的处理，最终会输出浏览器能使用的静态资源。

　　Webpack具备很大的灵活性，能配置处理文件的方式，使用方法大体以下：

module.exports = {
    // 全部模块的入口，webpack从入口开始递归解析出全部依赖的模块
    entry: './app.js',
    output: {
        // 将入口所依赖的全部模块打包成一个文件 bundle.js 输出
        filename: 'bundle.js'
    }
}

　　优势：

• 专一于处理模块化的项目，能作到开箱即用、一步到位；
• 可经过 Plugin 扩展，完整好用又不失灵活性；
• 使用场景不局限于Web开发；
• 社区庞大活跃，常常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
• 良好的开发体验；

　　缺点：只能用于采用模块化开发的项目。

3、为何选择Webpack

　　通过多年的发展，Webpack 已经成为构建工具中的首选，这是由于：

• 大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，Webpack能够为这些新项目提供一站式的解决方案；
• Webpack有良好的生态和维护团队，能提供良好的开发体验并保证质量；
• Webpack 被全世界大量的Web开发者使用和验证，能找到各个层面所须要的教程和经验分享。

4、Gulp与Webpack的区别

　　Gulp强调的是前端开发的工做流程，咱们能够经过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），而后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 简单说就一个Task Runner，就是用来跑一个一个任务的。Gulp 不能解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题。Gulp工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，工具以后能够自动替你完成这些任务。

 

　　Webpack是一个前端模块化方案，更侧重模块打包，咱们能够把开发中的全部资源（图片、js文件、css文件等）都当作模块，经过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

　　相同点：文件合并与压缩（css,js），sass/less预编译，启动server，版本控制。

　　不一样点：Gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。