使用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/*.css').pipe(clean());
    return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(csso())
    .pipe(concat('public.css'))
    .pipe(gulp.dest('dist/css/'));
});
复制代码

js压缩合并

js压缩合并的过程大同小异，增长了一个jshint()代码审查的过程，它会将不符合规范的错误代码输出到控制台。

gulp.task('dist:js', () => {
    gulp.src('dist/js/*.js').pipe(clean());
    return gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(uglify())
    .pipe(concat('public.js'))
    .pipe(gulp.dest('dist/js/'))
});
复制代码

less转css

在开发过程当中，由于html不能直接引入.less文件，所以还须要生成开发环境的.css。

gulp.task('src:css', () => {
    gulp.src('src/css/*.css').pipe(clean());
    return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('src/css/'));
});
复制代码

添加版本号

为了防止浏览器对文件进行缓存，须要对文件添加版本号，保证每次获取到的都是最新的代码。

gulp.task('revision', ['dist:css', 'dist:js'], () => {
    return gulp.src(["dist/css/*.css", "dist/js/*.js"])
    .pipe(rev())
    .pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist'))
})
gulp.task('build', ['dist:img'], () => {
    var manifest = gulp.src('dist/rev-manifest.json');
    return gulp.src('src/index.html')
    .pipe(revReplace({
        manifest: manifest
    }))
    .pipe(useref())
    .pipe(gulp.dest('dist/'))
})
复制代码

在revision中，首先经过rev()对dist目录下的.css/.js生成一个文件名带版本号的文件，例如本例中public.css生成public-5c001c53f6.css，而后分别输出到不一样的目录下，最后生成一个rev-manifest.json文件，存储了原文件和带版本号文件之间的映射关系，以下：

{
  "public.css": "public-5c001c53f6.css",
  "public.js": "public-93c275a836.js"
}
复制代码

在build中，先获取到rev-manifest.json中的对象，而后利用revReplace()来替换版本号，再使用useref()来进行资源的解析定位，最后输出便可。

以引入js文件为例，源html文件中对文件的引入则要改写为如下形式，即以注释的形式写入构建后生成的文件路径，以下:

<!-- build:js ./js/public.js -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/myAlbum.js"></script>
<!-- endbuild -->
复制代码

最后生成的html为：

<script src="./js/public-93c275a836.js"></script>
复制代码

具体的语法规则能够参见gulp-useref。

建立本地服务器并实现自动刷新

使用connet.server()来建立一个本地服务器，利用gulp.watch()来对src下的文件进行监测，若是发生变化，则执行编译less为css和刷新页面的任务。

gulp.task('connect', () => {
    connect.server({
        root: 'src',
        livereload: true,
        port: 8888
    })
})
gulp.task('reload', () => {
    gulp.src('src/*.html')
    .pipe(connect.reload())
})
gulp.task('watch', () => {
    gulp.watch('src/**/*', ['src:css', 'reload'])
})
复制代码

完整的代码能够参见github。

原文地址：

• 使用gulp实现前端自动化