Gulp自动化构建实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36094484/article/details/80934536

作为任务自动管理工具，是目前前端工程化提高效率非常有用的一环。以前觉得许多实用的功能webpack都有，也没怎么去研究，今天还是玩了下。

why gulp：我觉得唯一的原因是，gulp的使用够简单，能处理常见任务，帮我们实现项目构建的自动化。

安装：先npm全局安装gulp，再在项目文件夹npm本地安装gulp，即可在gulpfile.js配置文件中调用gulp。

npm install -g gulp
npm install --save-dev gulp

使用：和其他前端工具一样，当我们写好位于项目根目录的gulpfile.js配置文件后，只需要命令行输入gulp taskName(taskName是自定义的任务名)，就会自动执行gulp中我们定义的任务。

//示例
var gulp = require('gulp');      //引入gulp
var uglify = require('gulp-uglify');  //引入gulp-uglify，用来压缩代码
var concat = require('gulp-concat');  //引入gulp-concat，用来合并代码
gulp.task('base',function(){
	return gulp.src('./src/*.js')   //从src目录中获取该录下所有js文件，产生数据流
	.pipe(uglify())                 //上一步的数据流作为输入，压缩，再输出
	.pipe(concat('all.js'))         //上一步的数据流作为输入，合并成一个all.js
	.pipe(gulp.dest('build'));      //上一步的数据流作为输入，将all.js写入到名为build的文件夹里
});

写完gulpfile.js后，在项目文件夹命令行工具输入：

gulp base

就会自动执行任务，生成/build/all.js。

gulp定义任务的一般格式如上。当项目复杂时，我们可能需要定义多个任务。从上面的例子我们可以看出，gulpfile配置文件在引入gulp和相关工具函数后，主要是下面4个步骤：

gulp.task(str,function) :通过task方法定义一个任务，参数1是任务名，参数2是封装了特定操作的函数，即任务。

gulp.src(path) :通过src方法获取源文件，产生数据流，供后续步骤操作。

.src()之后用连缀的写法执行.pipe(fn())对上一步的数据流执行中间件操作。

gulp.dest(path):将上一步的数据流写入指定文件夹中。

所以，gulp的任务流，其实就是借用了管道的思想，在管道中对数据流一次次进行操作，最后输出处理过后的文件。

其中，gulp.src(path)的路径参数可以有下面4种写法：

js/app.js：指定确切的文件名

js/*.js：某个目录所有后缀名为js的文件。

js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。

!js/app.js：除了js/app.js以外的所有文件。

上例中，.task | .src | .dest 三个函数是gulp的方法，gulp还有一个watch方法，用来监听目标文件：

gulp.task('watch', function () { 
  gulp.watch('templates/*.tmpl.html'，['build']); //第二个参数是任务名数组 
});

命令行输入gulp watch之后，一旦templates目录中的.tmlp.html模板文件发生改动，就会执行build任务。

写gulp配置文件本身非常简单，真正出彩之处在于2点：

一是gulp的管道思想，让我们可以非常方便地管理任务。

二是gulp的各种插件，让我们使用工具函数一步步对项目文件进行定制操作。

附上几个看到的挺有用的插件：

gulp-cssnano或gulp-minify-css:压缩css文件

gulp-load-plugins:引入并执行后返回项目package.json所有gulp模块，如下：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

gulp-sass：对sass文件进行预处理

gulp-imagemin：压缩图片

gulp-useref：将html页面中的script标签的js按顺序合并

run-sequence：按顺序执行任务：

gulp.task('task-name', function(callback) { 
  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback); 
});

gulp-autoprefixer：自动添加样式前缀

del:清除文件

遇到的问题：

1.如果命令行输入gulp taskName执行后没报错，但是没有生成预期的结果文件，应该是定义任务时路径有问题。

2.gulp执行时默认只能接受ES5语法，如果代码文件用了ES6，要先在gulp任务里用babel转ES5，再执行后续的压缩合并。

参考：