gulp是基于Node.js的前端自动化构建工具，能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩混淆、格式化、浏览器自动刷新、部署文件生成等操作，同时可以对文件进行监听，如果文件有改动，可以自动处理生成新的文件。
所以gulp解决了开发效率(修改代码后自动更新页面)、资源整合(代码的压缩合并)、代码质量(代码的检查 自动化测试)、代码转换(es6—>es5)等问题
官网中文网

1.2.1 gulp的核心方法

  • gulp.task(‘任务名’,function(){}) // 创建任务。
  • gulp.src(‘./*.css’) // 指定想要处理的文件
  • gulp.dest() // 指定最终处理后的文件的存放路径
  • gulp.watch() // 自动的监视文件的变化，然后执行相应任务。

  • gulp.run(‘任务名’) // 直接执行相应的任务。

    1.2.2 安装gulp使用

  • 1.通过npm安装:npm install gulp-cli -g 安装全局的命令行，可以在终端中使用gulp相关命令

  • 2.在当前项目中也要安装gulp: npm install gulp --save
  • 3.还需要在当前项目中新建一个文件: gulpfile.js

var gulp = require(‘gulp’);
// 创建任务
// 第一个参数: 任务名
// 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
gulp``.``task``(``'test'``, ``function``(){
console.log(123)
return gulp.src('src/js2/*.js');
})
//执行任务: gulp 任务名
gulp test

1.2.3 对js进行压缩混淆和合并

  • npm install gulp-uglify --save 压缩混淆
  • npm install gulp-concat --save 合并

var gulp = require(‘gulp’);
var uglify = require(‘gulp-uglify’);
var concat = require(‘gulp-concat’);
gulp.task(‘script’, function(){
// 1.要匹配到要处理的文件
// 指定指定的文件:参数是匹配的规则
// 参数也可以是数组，数组中的元素就是匹配的规则
return gulp.src(‘src/js2/*.js’)
// concat 的参数是合并之后的文件名字
.pipe(concat(‘index.js’))
// 压缩混淆
.pipe(uglify())
// dest方法参数，指定输出文件的路径
.pipe(gulp.dest(‘dist/js2’))
})
gulp.run(‘script’)

1.2.4 对css进行压缩操作

  • npm install gulp-cssnano --save

var concat = require(‘gulp-concat’);
var cssnano = require(‘gulp-cssnano’);
// 新建一个任务，对css进行处理
gulp.task(‘style’, function(){
// 对项目中的2个css文件进行合并，压缩操作
// 1.匹配到要处理的文件
return gulp.src(‘src/css/*.css’)
// 2.合并文件
.pipe(concat(‘index.css’))
// 3.压缩操作
.pipe(cssnano())
// 4.输出到指定目录
.pipe(gulp.dest(‘dist/css’))
})
gulp.run(‘style’)

1.2.5 对html进行压缩

  • npm install gulp-htmlmin --save

var htmlmin = require(‘gulp-htmlmin’);
// 新建一个任务，对html进行压缩
gulp.task(‘html’, function(){
// 1.匹配到要处理的文件
return gulp.src(‘src/index.html’)
// 2.压缩操作
.pipe(htmlmin({collapseWhitespace:true}))
// 3.指定输出目录
.pipe(gulp.dest(‘dist’))
})
gulp.run(‘html’)

1.2.6 gulp对图片压缩

  • npm install gulp-imagemin@3.0.0

gulp.task(‘image’,function(){
return gulp.src(‘./images/.‘)
.pipe(imageMin({progressive: true}))
.pipe(gulp.dest(‘./dist/images’))
})

1.2.7 gulp.watch

  • 监视文件的变化，然后执行相应的任务

// gulp.watch 监视文件变化，执行相应任务
gulp.task(‘mywatch’, function(){
// 1.监视js文件的变化，然后执行script任务
// 第一个参数：要监视的文件的规则
// 第二个参数：是要执行的任务
gulp.watch(“src/js2/*.js”,gulp.series(“script”))
})
//然后使用gulp mywatch启动监听，然后一旦源文件修改了，会立刻同步编译新的目标文件

1.2.8 gulp解决浏览器缓存问题

  • npm install gulp-rev gulp-rev-rewrite

var rev = require(‘gulp-rev’);
var revRewrite = require(‘gulp-rev-rewrite’);
//给js文件重命名 并且输出到dist目录下
gulp.task(‘js’, () =>
return gulp.src([‘./js/c.js’])
.pipe(gulp.dest(‘dist’)) // 将源文件拷贝到打包目录
.pipe(rev())
.pipe(gulp.dest(‘dist’)) // 将生成的hash文件添加到打包目录
.pipe(rev.manifest(‘js-rev.json’))
.pipe(gulp.dest(‘dist’)) // 将map映射文件添加到打包目录
);
//将html中的js文件用重名后的名字替换
gulp.task(‘html2’, () => {
const jsManifest = gulp.src(‘dist/js-rev.json’); //获取js映射文件
return gulp.src(‘./html/a.html’)
.pipe(revRewrite({manifest: jsManifest})) // 把引用的js替换成有版本号的名字
.pipe(gulp.dest(‘dist’))
});
//当c.js文件发生变化之后，会重新执行js和html2的任务
gulp.task(‘mywatch’, function(){
// 1.监视js文件的变化，然后执行script任务
// 第一个参数：要监视的文件的规则
// 第二个参数：是要执行的任务
return gulp.watch(“./js/c.js”,gulp.series([‘js’,’html2’]))
})