使用gulp构建前端自动化的方法示例
本文讲解"使用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 转 csscsso = 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构建前端自动化的方法示例" 就介绍到此。希望多多支持编程宝库。
怎么在微信小程序中使用for循环动态渲染页面：本文讲解"如何在微信小程序中使用for循环动态渲染页面"，用于解决相关问题。wxml部分：<view wx:for='{{languageList}}' class='hua' data- ...