Gulp & webpack 配置详解

1. Gulp VS webpack 比较

Gulp 是一个任务管理工具，让简单的任务更清晰，让复杂的任务易于掌控；而 webpack 的理念是，一切皆为模块，每个模块在打包的时候都会经过一个叫做 loader 的东西，它具备非常强大的精细化管理能力，主要解决的是依赖分析问题。

Gulp：搞清楚 gulp.src, gulp.dest, gulp.task, gulp.watch 四个 API 就差不多了，它的底层原理是使用 Node 的 Transform Streams，这是一个可读可写可做中间转换的 Streams 管道，由于从 src 到 dest 过程中，文件一直停留在 Streams 中，没有落地成为实体文件，所以整体运作效率非常高。

gulp 常用插件：

• gulp-load-plugins：自动加载 package.json 中的 gulp 插件

• gulp-rename： 重命名
• gulp-uglify：文件压缩
• gulp-concat：文件合并
• gulp-less：编译 less
• gulp-sass：编译 sass
• gulp-clean-css：压缩 CSS 文件
• gulp-htmlmin：压缩 HTML 文件
• gulp-babel：使用 babel 编译 JS 文件
• gulp-jshint：jshint 检查
• gulp-imagemin：压缩 jpg、png、gif 等图片
• gulp-livereload：当代码变化时，它可以帮我们自动刷新页面

Webpack 概念很多，但搞清楚 entry，output 和 loader 三个关键点，基本上就可以解决简单的问题了，稍微复杂的场景主要包括对资源的合并处理、分拆处理、多次打包等，部分这样的问题可以使用插件辅助解决，但是 Webpack 的强大并不在文件处理，而是依赖分析，所以在流程操作特别复杂的情况，webpack 并不能胜任工作，往往会被作为 gulp 的一个 task，整体工作流交给 gulp 主导。

webpack 常用的 loader 和 plugin：

Loader 列表

• less-loader, sass-loader：处理样式

• url-loader, file-loader：两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
• babel-loader，babel-preset-es2015，babel-preset-react：js 处理，转码
• expose-loader： 将 js 模块暴露到全局

Plugin 列表

• NormalModuleReplacementPlugin：匹配 resourceRegExp，替换为 newResource

• ContextReplacementPlugin：替换上下文的插件
• IgnorePlugin：不打包匹配文件
• PrefetchPlugin：预加载的插件，提高性能
• ResolverPlugin：替换上下文的插件
• DedupePlugin：删除重复或者相似的文件
• LimitChunkCountPlugin：限制打包文件的个数
• UglifyJsPlugin：JS文件的压缩
• CommonsChunkPlugin：共用模块提取
• HotModuleReplacementPlugin：runtime时候的模块热替换
• NoErrorsPlugin：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
• HtmlWebpackPlugin：HTML模块的热更新

--

2. Gulp 简介

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

image.png

--

2.1 安装 Gulp

1 . 全局安装 gulp

npm install --global gulp

2 . 作为项目的开发依赖（devDependencies）安装：

npm install --save-dev gulp

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

2.2 配置Gulp

在项目根目录下创建一个名为 gulpfile.js 的文件，gulpfile.js是gulp项目的配置文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

2.3 运行gulp

在命令提示符执行 gulp 任务名称

<!-- 调用默认任务default -->
gulp  或者  gulp default

2.4 清除文件

通过gulp删除某个文件夹的文件

1 . 安装 gulp-clean

npm i gulp-clean --save-dev

2 . 编写 gulpfile.js 代码

var clean = require('gulp-clean');

gulp.task('clean', function() {
    return gulp.src(['dist/css', 'dist/js'], { read: false })
               .pipe(clean());
});

2.5 编译less

通过gulp编译LESS代码

1 . 安装 gulp-less

npm i gulp-less --save-dev

2 . 编写 gulpfile.js 代码

var less = require('gulp-less');

gulp.task('styles', function() {
    return gulp.src('src/less/*.less') //源文件路径
        .pipe(less()) //less编译
        .pipe(gulp.dest('dist/css')) //目的路径
});

2.6 自动前缀

通过gulp处理css的自动前缀

1 . 安装 gulp-autoprefixer

npm i gulp-autoprefixer --save-dev

2 . 编写 gulpfile.js 代码

var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(autoprefixer()) //自动前缀
        .pipe(gulp.dest('dist/css')) //目的路径
});

2.7 base64编码

通过gulp将css中的图片转换成base65编码

1 . 安装 gulp-base64

npm i gulp-base64 --save-dev

2 . 编写 gulpfile.js 代码

var base64 = require('gulp-base64');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(base64()) //base64编码
        .pipe(gulp.dest('dist/css')) //目的路径
});

2.8 css压缩

通过gulp将css进行压缩

1 . 安装 gulp-minify-css

npm i gulp-minify-css --save-dev

2 . 编写 gulpfile.js 代码

var cssmin = require('gulp-minify-css');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(cssmin()) //css压缩
        .pipe(gulp.dest('