前端工程化--gulp的使用

gulp

介绍

• gulp 是一个基于 Nodejs 的自动化构建工具，中文主页
• 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

使用步骤：

1. 安装 nodejs

2. 全局安装 gulp

   npm install gulp -g
   

3. 局部安装gulp

   npm install gulp --save-dev
   

4. 创建一个简单的应用，文件结构如下：

   |- gulpfile.js  // gulp配置文件
   |- package.json
   

5. 配置编码: gulpfile.js

   //引入gulp模块
   const gulp = require('gulp');
   //定义任务
   gulp.task('任务名', function() {
     // 将任务代码放在这
   });
   

6. 构建命令:

   gulp 任务名
   

   The following tasks did not complete: default

   Did you forget to signal async completion?

   错误的解决方法：

   1. 返回一个可读流
   2. 传入一个回调并执行
   3. 回调函数设置为 async 函数

gulp 插件

gulp 插件是专门针对 gulp 开发的工具包（npm包），用来实现特定的功能。

gulp-jshint 语法检查：

JSHint 是一个 JavaScript 的代码质量检查工具。gulp-jshint 是为 gulp 封装的插件

使用步骤：

1. 安装插件

   npm install jshint gulp-jshint --save-dev
   

2. 创建配置文件 .jshintrc
   （选项配置地址 https://jshint.com/docs/options/）

   {
       "esversion": 6,  
       "asi":true,				// 允许不写结尾处的分号
       "undef": true, 			// 使用之前必须定义
       "devel": true, 			// 没有定义也可以使用 console，alert 进行调试
       "eqeqeq": true,			// 强制使用 === 
       "unused": true, 		// 定义了必须使用
       "globals": { 			// 配置全局变量，直接使用不会报错
           "$": true 
       }
   }
   

3. gulpfile.js 引入 jshint

   const jshint = require('gulp-jshint')
   

4. 定义任务

   gulp.task('jshint', function() {
     // 任务代码
     return gulp.src('./src/js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'));
   });
   

5. 运行命令

   gulp jshint 
   

gulp-babel 语法转换

Babel 是一个 JavaScript 编译器，可以将新的 JS 语法（ES6、7、8）转化为浏览器识别的 ES5 语法。
gulp-babel 是 babel 为 gulp 封装的插件

1. 安装插件：

   npm install --save-dev gulp-babel @babel/core @babel/preset-env
   

   @babel/core 是 babel 的核心包

   @babel/preset-env 预设的包 (babel-preset-es2015)

2. gulpfile.js 引入：

   const babel = require('gulp-babel');
   

3. 定义任务:

   gulp.task('babel', () => {
       return gulp.src('./src/js/*.js')
           .pipe(babel({ //进行语法转换
               presets: ['@babel/env']
           })).pipe(gulp.dest('build/js'))//输出到指定目录
   });
   

4. 运行命令：

   gulp babel
   

经过 babel 转换后的 ES6 模块化语法变成了 CommonJs 语法，还需要用 browserify 转换

gulp-browserify 转换 CommonJs 模块化语法

1. 安装插件：

   npm install --save-dev gulp-browserify
   

2. 安装插件（用于重命名）

   npm install --save-dev gulp-rename
   

3. 引入：

   const browserify = require('gulp-browserify');
   const rename = require('gulp-rename');
   

4. 定义任务:

   gulp.task('browserify', function() {
     return gulp.src('./build/js/index.js')
       .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
       .pipe(rename('built.js'))			//为了防止冲突将文件重命名
       .pipe(gulp.dest('build/js'))		//输出到指定位置
   });
   

5. 运行命令

   gulp browserify
   

配置默认任务，让多个任务依次执行

定义默认任务

gulp.task('default', gulp.series('jshint', 'babel', 'browserify'));

gulp-uglify 压缩 JavaScript

1. 安装插件

   npm install --save-dev gulp-uglify
   

2. 引入插件

   const uglify = require('gulp-uglify');
   

3. 定义任务

   gulp.task('uglify', function () {
     return gulp.src('build/js/built.js')
       .pipe(uglify())  //压缩js
       .pipe(rename('dist.min.js'))
       .pipe(gulp.dest('dist/js'))
   });
   

4. 运行命令

   gulp uglify
   

gulp-less 编译 less 文件及使用 less-plugin-autoprefix 扩展前缀

1. 安装插件

   npm install gulp-less less-plugin-autoprefix
   

2. 引入插件

   const less = require('gulp-less');
   const LessAutoprefix = require('less-plugin-autoprefix');
   const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
   

3. 定义任务：

   gulp.task('less', function () {
     return gulp.src('./src/css/*.less')
       .pipe(less({
         plugins: [autoprefix]//自动扩展前缀
       }))
       .pipe(gulp.dest('./build/css'));
   });
   

4. 运行命令：

   gulp less 
   

使用 gulp-concat 合并 CSS 文件

1. 安装插件

   npm install --save-dev gulp-concat
   

2. 引入

   const concat = require('gulp-concat');
   

3. 定义任务

   gulp.task('concat', function () {
       return gulp.src('./build/css/*.css')
           .pipe(concat('built.css'))
           .pipe(gulp.dest('./build/css/concat'));
   });
   

4. 运行命令：gulp concat

gulp-cssmin 压缩 CSS 文件

1. 安装插件：

   npm install --save-dev gulp-cssmin
   

2. 引入

   const cssmin = require('gulp-cssmin');
   

3. 定义任务

   gulp.task('cssmin', function () {
       return gulp.src('build/css/concat/built.css')
           .pipe(cssmin())
           .pipe(rename('dist.min.css'))
           .pipe(gulp.dest('dist/css'));
   });
   

gulp-htmlmin 压缩 HTML 文件

1. 安装插件

   npm install --save gulp-htmlmin
   

2. 引入

   const htmlmin = require('gulp-htmlmin');
   

3. 定义任务

   gulp.task('htmlmin', () => {
     return gulp.src('src/index.html')
       .pipe(htmlmin({
         collapseWhitespace: true ,//去除空格
         removeComments:true //去除注释
       }))
       .pipe(gulp.dest('dist'));
   });
   

自动化配置

1. 安装模块

   npm install gulp-livereload gulp-connect opn --save-dev
   

2. 引入模块

   const livereload = require('gulp-livereload');
   const connect = require('gulp-connect');
   const opn = require('opn');
   

3. 自动执行任务，编译代码

   //1. 在所有可能要执行任务后面加上 .pipe(livereload());
   gulp.task('watch', function () {
       //2. 启动热加载服务
       livereload.listen();
       //3. 通过自己服务器打开项目，自动刷新
       connect.server({
           root: 'dist',
           port: 3000,
           livereload: true  // 自动刷新
       });
       //3. 自动打开浏览器
       opn('http://localhost:3000/index.html');
       //4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
       gulp.watch('src/css/*.less', gulp.series(['less', 'concat', 'cssmin']));
       gulp.watch('./src/js/*.js', gulp.series(['jshint', 'babel', 'browserify', 'uglify']));
       gulp.watch('./src/index.html', gulp.series('htmlmin'));
   });
   

备注：必须要在 src 文件夹中修改 index.html 中引入样式和脚本的路径，gulp 不会自动处理路径。

相关插件:

• gulp-concat : 合并文件(js/css)
• gulp-uglify : 压缩js文件
• gulp-rename : 文件重命名
• gulp-less : 编译less
• gulp-livereload : 实时自动编译刷新

重要API

• gulp.src(filePath/pathArr) :
  • 指向指定路径的所有文件, 返回文件流对象
  • 用于读取文件
• gulp.dest(dirPath/pathArr)
  • 指向指定的所有文件夹
  • 用于向文件夹中输出文件
• gulp.task(name, [deps], fn)
  • 定义一个任务
• gulp.watch()
  • 监视文件的变化