使用gulp构建前端自动化的方法示例

gulp是一个自动化构建工具，开发者可以用它来自动执行一些常见的任务。这里以我之前做的一个demo为例，简要介绍如何使用gulp实现前端工程自动化。

项目结构

其中src目录下表示的是项目的源代码，可以看到其中有less、js、html等，而dist目录则是保存的是gulp编译后生成的代码，相当于生产环境。最后也最重要的是gulpfile.js，这个文件用于设置gulp相关的配置，类似于webpack中的webpack.config.js。

安装

这里使用的gulp为v3.9.1，语法和最新的v4.x有所出入，想学习最新的gulp语法，可以参考gulp.js - The streaming build system 。

3.9.1 安装如下：

npm install --save-dev gulp

语法

• gulp.task()用于定义一个gulp任务，在命令行中可以使用gulp [任务名]开启该任务。
• gulp.src()会返回符合匹配的文件流，可以被pipe()到其他插件中。
• gulp.dest()：输出所有数据。
• gulp.watch()用于监测文件的变动。

实践

在这个项目中，有一些常见的需求，这里使用gulp来实现自动化：

• less转css
• css压缩合并
• js压缩合并
• 图片压缩

在gulpfile.js中首先需要导入gulp和一些常用的插件，本次demo使用到的插件如下：

var gulp = require('gulp'),
  less = require('gulp-less'),   //less 转 css
  csso = require('gulp-csso'),   //css压缩
  concat = require('gulp-concat'), //合并文件
  uglify = require('gulp-uglify'), //js 压缩
  jshint = require('gulp-jshint'), //js 检查
  clean = require('gulp-clean'),  //清除文件
  imagemin = require('gulp-imagemin'),      //图片压缩
  rev = require('gulp-rev'),    //添加版本号
  revReplace = require('gulp-rev-replace'),   //版本号替换
  useref = require('gulp-useref'), //解析html资源定位
  gulpif = require('gulp-if'),   //if语句
  connect = require('gulp-connect');//创建web服务器

图片压缩

获取到src下所有以.jpg或.png结尾的图片，将其压缩后输出到dist目录下。

gulp.task('dist:img', () => {
  gulp.src(['./src*.jpg', './src*.png'])
  .pipe(imagemin())
  .pipe(gulp.dest('dist/'))
})

less压缩合并为css

先清除已存在的css，然后将src下以.less结尾的文件通过less()转为css文件，再通过csso()以及concat()实现对css的压缩合并。

gulp.task('dist:css', () => {
  gulp.src('dist/css*', ['src:css', 'reload'])
})

完整的代码可以参见github。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。