前端 gulp 构建项目命令总结

最近做了一个比较 mini 的项目,使用的是原生 JS 和 jQuery,想着平时都是用 webpck 来打包,这次这个简单点,不如试试别的,折腾一下。于是就选了 gulp,以前没用过,对 gulp 还是一知半解,所以折腾了几个小时才搭建好,这里也记录下。

安装

在安装之前,需要有 node 和 npm 的环境,没安装的要记得先安装,参考 node 官网或其他很多很多很多的文章,都有详细的说明。

npm i -g gulp-cli

全局安装命令行工具,接着 cd 进入到你的项目根目录

npm i gulp --save-dev
// 或者使用 yarn
yarn add gulp --dev

--save-dev 的意思是把它写入 package.json 的 devDependencies 下,也就是开发环境依赖。

到这,gulp 就安装好了。目前最新的是 gulp4 ,我在网上搜的一些写法都是 gulp3 的,所以报错比较多。对于 gulp 来说,主要使用一系列异步执行的 task 任务来完成相关操作。用得最多就是 gulp.task 定义一个任务,然后在回调函数里执行我们想做的操作。

插件

gulp.task() 只是创建一个执行任务,真正项目构建过程中,我们需要用到许多的插件来辅助完成一系列操作,比如代码压缩,文件合并等等。这里介绍下常用的插件:

  • gulp-jshint
    代码检查,用了这个后有点后悔,配置太麻烦了,建议还是用 eslint 好了
  • gulp-sass
    由于用 sass 书写,所以这是编译 sass 的插件,对于 less 或其他来说,也可以去 npm 上搜索相关插件
  • gulp-imagemin 图片压缩用的
  • gulp-rev
    这个很重要,给 css 和 js 文件添加 hash ,防止缓存。一大堆缓存导致你改了东西都没反应,简直让人抓狂
  • gulp-rev-collector
    配合 gulp-rev 用的,自动给 html 文件引入加上 hash 后的 css 或 js 文件
  • gulp-htmlmin
    这个是用来压缩 html 文件的,所有文件能压缩的就压缩,节省空间
  • gulp-concat
    这个是用来合并文件的,比如将所有 js 都合并为一个大的 js ,再引入
  • gulp-uglify
    这个是用来压缩 js 文件的
  • gulp-rename
    这个是用来给文件重命名的,比如前面我们将所有 js 文件合并为一个大文件后,可以进行重命名,方便 html 统一写入
  • del
    这个是用来清除 dist 目录的,每次打包之前都先把上次打包的 clean 掉,反正新旧混一起,出现什么意想不到的
  • browser-sync
    这个也很关键,看名字就知道,是用来启动本地服务的,并且可以做到更改代码后自动刷新浏览器预览最新效果
  • opn
    配合 browser-sync 使用,打开特定的网页地址

上述插件可以使用以下命令进行安装:

npm i 插件名字 --save-dev
// 或者
yarn add 插件名字 --dev

至于具体的用法,推荐到 npm 官网去具体查询某个库,里面有详细的介绍和使用说明。

配置文件

gulp 主要是使用 gulpfile.js 文件来进行项目配置,在你的项目根目录下创建这个文件。gulp 通过 task 来创建一个任务,通过 gulp + 任务名来执行一个任务。比如下面这个示例:

var gulp = require('gulp')
var jshint = require('gulp-jshint')
gulp.task('jshint', done => {
  gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
  done() 
});

上述代码首先引入了 gulp ,然后引入了 gulp-jshint 这个插件,记得先 npm install 下,接着使用 taks 定义了一个任务,src() 方法用于获取路径文件,可以使用正则进行快速匹配;pipe() 方法用于管道传输,可以多次调用,执行不同的操作。通过定义名为 jshint 的任务,执行它就会检查 src/js/ 目录下的所有 js 文件,在这之前,你可以在项目根目录下创建 .jshintrc 文件,在里面配置 js 代码的校验规则。这样在提交代码前,打开终端,进到项目目录下,执行 gulp jshint ,就可以检查 js 代码。

这里注意的是,最新的 gulp4 的语法跟之前不同,每一个 task 都是一个异步任务,你可以像上面一个传递一个回调(done), 在执行完后调用 done 回调表示完成,也可以直接写 async 语法,类似下面这样:

gulp.task('jshint', async() => {
  await gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
});

基本使用就是这样。通常在项目里,我们需要一系列操作,压缩图片,代码,编译 scss/less 之类的,也就相应需要定义多个 task,这里列下我的配置文件,仅供参考:

var gulp = require('gulp'); 
    
// 插件
var jshint = require('gulp-jshint'); //js代码校验 
var sass = require('gulp-sass');    //编译css
var imagemin = require('gulp-imagemin'); //压缩图片
var rev = require('gulp-rev') // 给文件添加 hash,防止缓存
var revCollector = require('gulp-rev-collector')  // 把加 hash 的文件注入到 html 
var gulpHtmlMin = require('gulp-htmlmin')   // html 压缩
var uglify = require('gulp-uglify');  // js 压缩
var cleanCSS = require('gulp-clean-css') //css 压缩

// 浏览器实时预览
var browserSync = require('browser-sync');
var opn = require('opn');

var path = {
  sass: './src/css/*.scss',
  css: './src/css/*.css',
  js: './src/js/*.js',
  html: './src/*.html',
  src: './'
};

// 检查脚本
gulp.task('jshint', done => {
    gulp.src('./src/js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
    done();
});

// 编译Sass
gulp.task('sass', done => {
    gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./src/css/'))
      
    done()
});

gulp.task('css', done => {
  gulp.src('./src/css/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rev())
    .pipe(gulp.dest('./dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/css'))
  done()
})

gulp.task('sass:dev', done => {
  gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./src/css/'));
    done()
})

// 压缩图片
gulp.task('imagemin', done => {
    gulp.src('./src/image/*.{png,jpg,gif,ico}')
      .pipe(imagemin({
        optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
        progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
      }))
      .pipe(gulp.dest('./dist/image'));
    done()
 });
// 合并,压缩js文件
gulp.task('scripts', done => {
    gulp.src('./src/js/*.js')
      .pipe(uglify())
      .pipe(rev())
      .pipe(gulp.dest('./dist/js'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('./rev/js'));
    done()
});

gulp.task('revCollector', done => {
  gulp.src(['./rev/**/*.json', './src/*.html'])
    .pipe(revCollector(
      {
        replaceReved: true,
        dirReplacements: {
            'css': './css',
            'js': './js'
        }
      }
    ))
    .pipe(gulpHtmlMin({
      //删除空格    
      collapseWhitespace : true,
      //删除注释
      removeComments : true
    }))
    .pipe(gulp.dest('./dist'))
  done()
})

// 启动服务,在浏览器打开
gulp.task('serve', done => {
  browserSync.init({
      server: {
          baseDir: path.src
      },
      port: 5501,
      open: false
  }, function() {
      var homepage = 'http://localhost:5501/src/index.html';
      opn(homepage);
  });
  // 编译完sass后,无刷新方式更新页面
  gulp.watch(path.sass, gulp.series('sass:dev'));
  // 修改页面和js后,页面刷新,重新加载
  gulp.watch([path.html, path.js, path.sass]).on("change", function() {
      browserSync.reload();
  });
  done()
})

gulp.task('watch', done => {
   gulp.watch('./src/css/*.scss', gulp.series('sass'));
   gulp.watch('./src/js/*.js', gulp.series('jshint', 'scripts'));
   gulp.watch('./src/image/**', gulp.series('imagemin'))
   done()
})
gulp.task('build', gulp.series('jshint', 'sass', 'css', 'scripts', 'imagemin', 'revCollector'))
gulp.task('start', gulp.series('sass:dev', 'serve'))

可以看到,最后两句代码,使用 gulp.task 定义了一个 build 和 start 的任务,使用 gulp.series 将前面定义的任务都串联起来同步执行,所以执行 gulp start ,就可以启动服务,在浏览器实时预览了;执行 gulp build 就可以打包压缩在 dist 目录下。我们可以在 package.json 文件中修改:

"scripts": { 
  "dev": "gulp start",
  "build": "gulp build" 
},

这样就可以执行 npm run dev 运行项目,npm run build 打包项目;如果你使用 yarn 的话,执行 yarn devyarn build

报错

  • Did you forget to signal async completion
    解决:就是没有执行回调导致的,通过传入一个回调,比如 done ,结尾执行 done() 即可,或者直接写 async 和 await 。
  • AssertionError: Task function must be specified
    解决:主要就是 gulp3 和 gulp4 语法的差异,以前写一个任务是:gulp.task('test', ['a', 'b'], ...) 表示这个 test 任务在 a 和 b 执行完后才执行,这是以前的写法,现在应该用 gulp.series('a', 'b', 'test') 表示依次执行 a、b、test 。

总结

对于 gulp 的话,首先还是熟读官网文档,了解基本的语法和使用示例,然后就可以网上找对应的插件来使用,比如你想压缩图片,那就搜 gulp 相关的图片压缩插件,再去 npm 官网了解插件的具体操作。最后写 task 将这些插件串联起来执行,基本就是这样。

(完)

你可能感兴趣的:(前端 gulp 构建项目命令总结)