Gulp安装使用 - 配置解析

环境安装

• 首先，安装 node 环境，配置环境变量可参考文章：
• 其次，安装 gulp 全局安装npm install gulp -g

在项目中使用gulp

• 在项目的根目录下执行命令 npm init创建 package.json 文件；
• 在项目根目录下安装 gulp： npm install --save-dev gulp gulp 的版本信息会保存在 package.json 文件中，下载的 gulp 依赖包会在 node_modules 里面；
• 安装好之后新建一个 gulpfile.js 的配置文件，该文件主要用来编写打包执行的程序；

项目目录是这样的：这里包括配置文件，依赖包，还有最后输出的文件目录：

gulp配置文件

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin') // html压缩
const minifyCss = require('gulp-minify-css') // css压缩
const autoprefix = require('gulp-autoprefixer') // css兼容处理
const babel = require('gulp-babel') // 把es6语法解析成es5
const uglify = require('gulp-uglify') // js代码压缩
const rev = require('gulp-rev') // 对文件名加MD5后缀
const del = require('del') // 删除文件
const revCollector = require('gulp-rev-collector') // 替换路径
// const jshint = require('gulp-jshint')
// const concat = require('gulp-concat') // 合并文件
// const sass = require('gulp-sass') // sass转css

// html任务
gulp.task('revHtml', function () {
  const options = {
    removeComments: true, // 清除HTML注释
    collapseWhitespace: true, // 压缩HTML
    collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input />
    removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
    minifyJS: true, // 压缩页面JS
    babel: true,
    minifyCSS: true // 压缩页面CSS
  }
  return gulp.src('./html/*.html').pipe(htmlmin(options)).pipe(gulp.dest('./build/html'))
})

// css任务
gulp.task('style', function () {
  return gulp
    .src('./css/*.css')
    .pipe(
      autoprefix({
        browsers: ['last 2 versions'],
        cascade: false
      })
    )
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('./build/css'))
    .pipe(rev.manifest('rev-css-manifest.json'))
    .pipe(gulp.dest('./build/css'))
})

// script任务 合并js/目录下得所有得js文件并输出到build/目录，然后gulp会重命名、压缩合并的文件，也输出到build/目录
gulp.task('js', function () {
  return gulp
    .src('./js/*.js')
    .pipe(babel()) // es6解析
    .pipe(uglify()) // 压缩
    .pipe(rev()) // 添加版本号
    .pipe(gulp.dest('./build/js'))
    .pipe(rev.manifest('rev-js-manifest.json'))
    .pipe(gulp.dest('./build/js'))
})

// Sass任务：编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中
// gulp.task('sass', function () {
//   gulp.src('./scss/*.scss').pipe(sass()).pipe(gulp.dest('./css'))
// })

// img任务
gulp.task('images', function () {
  return gulp
    .src(['./images/*.jpg', './images/*.png', './images/*.gif'])
    .pipe(rev()) // 文件名加MD5后缀
    .pipe(gulp.dest('./build/images'))
    .pipe(rev.manifest('rev-images-manifest.json')) // 生成一个rev-manifest.json
    .pipe(gulp.dest('./build/images')) // 将rev-manifest.json保存到rev目录内
})

// html/css替换任务：使用rev替换成md5文件名
gulp.task('rev', function () {
  return gulp
    .src(['./build/**/*.json', './html/*.html'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(gulp.dest('./html'))
})

// js替换任务
gulp.task('revjs', function () {
  // css，主要是针对img替换
  return gulp
    .src(['./build/**/rev-images-manifest.json', './build/js/*.js'])
    .pipe(
      revCollector({
        replaceReved: true,
        dirReplacements: {
          '../images': '../build/images'
        }
      })
    )
    .pipe(gulp.dest('./build/js'))
})

// img替换任务
gulp.task('revimg', function () {
  // css，主要是针对img替换
  return gulp
    .src(['./build/**/rev-images-manifest.json', './build/css/*.css'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(gulp.dest('./build/css'))
})

// Link任务：检查js/目录下得js文件有没有报错或警告
// gulp.task('lint', function () {
//   gulp.src('./js/*.js').pipe(jshint()).pipe(jshint.reporter('default'))
// })

// 删除Build文件
gulp.task('clean:Build', function () {
  return del(['./build/**/'])
})

// 执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行
gulp.task(
  'default',
  gulp.series('clean:Build', gulp.parallel('js', 'images', 'style'), 'revimg', 'revjs', 'rev', function () {})
)

这里对上述代码做一些说明：

@babel/core

• gulp-htmlmin：是用来压缩html的
• gulp-uglify：压缩混淆js的，类似于webpack里loader
• gulp-babel：把js转成es5的语法，做兼容处理
• gulp-rev：对文件名加MD5版本号后缀
• del：用来删除文件
• gulp-rev-collector：用来路径替换
• gulp-minify-css：压缩css
• gulp-autoprefixer：css兼容处理，添加兼容前缀
• gulp-concat：用来合并

说明：

• 使用babel的时候要创建一个.babelrc文件
• gulp.dest('./build/js')是输出的目录，目录不存在会自动创建
• 普通的兼容处理是可以用gulp-autoprefixer来处理的，要是特殊的兼容语法还得在写代码的时候自己加上去，例如flex的兼容用法
• rev.manifest()方法是给js生成版本号的清单文件，方便后面文件替换
• 代码后面三个任务是针对js，css，img文件做替换的处理，用的gulp-rev-collector工具
• 代码中最后一个任务是入口任务，然后按顺序执行各个任务，至打包结束；

执行打包

因为 gulp 需要安装插件打包，不同的插件实现不同的功能，这里需要额外引入其他插件，对应如上配置文件
需要什么功能就引入什么插件

npm install --save-dev gulp-babel @babel/core gulp-concat gulp-uglify gulp-rev gulp-rev-collector gulp-htmlmin del gulp-autoprefixer gulp-minify-css

第一点注意： 输入gulp后提示“无法加载文件***，因为在此系统上禁止运行脚本。有关详细信息，请参阅~~”。出现这些报错信息时，是出现了权限问题，项目控制台输入Get-ExecutionPolicy -List查看执行策略，优先级由高到底

原因是因为 Process 作用域的执行策略为 Undefined
通过执行命令：Set-ExecutionPolicy RemoteSigned -Scope Process将值修改为 RemoteSigned 就可以了

第二点注意： 打包如果出现gulp-babel报错信息，是因为npm发布的gulp-babel版本问题，他并不会报错，仅仅是不更新压缩文件。

解决方法：

• 首先查看自身的 package.json 文件发现当前 babel 版本为8，而我们的插件使用版本为7。此时需要对当前版本的 babel 进行卸载npm uninstall gulo-babel -D

• 卸载完毕后在进行安装版本号为7的，可以参考官网https://www.npmjs.com/package/gulp-babel此时进行安装 gulp-babel即可
  npm install --save-dev gulp-babel@7 babel-core babel-preset-env

创建.babelrc文件

在项目根目录添加.babelrc文件，并添加如下代码：

{
  "presets": ["env"]
}

该文件的优势：

可解决浏览器缓存问题，提高代码的安全性，配置文件写好，操作起来很方便

该文件的劣势：

打包之后会生成新的目录文件，相当于复制了一份，会占用更多的空间，

• 如果不添加该文件，需要替换文件时需先手动添加到build目录中，较繁琐，个人建议添加，这样可以把整个项目生成一个新的目录，然后线上直接发布打包后的目录文件就好。

最后打包

在根目录下执行命令 gulp 进行打包，打包成功如下：