使用gulp实现前端自动化
Posted web前端与开发
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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 转 css
less = require('gulp-less'),
//css压缩
csso = require('gulp-csso'),
//合并文件
concat = require('gulp-concat'),
//js 压缩
uglify = require('gulp-uglify'),
//js 检查
jshint = require('gulp-jshint'),
//清除文件
clean = require('gulp-clean'),
//图片压缩
imagemin = require('gulp-imagemin'),
//添加版本号
rev = require('gulp-rev'),
//版本号替换
revReplace = require('gulp-rev-replace'),
//解析html资源定位
useref = require('gulp-useref'),
//if语句
gulpif = require('gulp-if'),
//创建web服务器
connect = require('gulp-connect');
图片压缩
获取到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 ></script> <script ></script> <!-- endbuild -->
最后生成的html为:
<script ></script>
具体的语法规则可以参见 gulp-useref 。 [href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Flvqq%2FDemos%2Ftree%2Fmaster%2Fgulp-demo"
]
创建本地服务器并实现自动刷新
使用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']) })
以上是关于使用gulp实现前端自动化的主要内容,如果未能解决你的问题,请参考以下文章