【gulp.js】中大型项目构建发布实例

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于Node.js 构建的，利用Node.js 流的威力，你可以快速构建项目。

一、项目简介

本文针对中大型cms项目（项目文件超过1.2G，静态资源类大小800MB）进行测试gulp.js的相关能力，结果如下：gulp简单易用，但在处理大量文件是性能消耗明显，cpu比较稳定，内存消耗较小无明显波动。插件性能差异较大，imagemin压缩插件是彻底把我的cpu压满了，特别耗资源。整体来说gulp是个比较优秀的构建工具，自由度很大。

二、配置文件解析

本配置文件未继承云环境自动发布插件，是一本地发布为事例来说明，发布处理常用的一些插件和基础配置方法。主要是gulp-rev插件的使用，让模板文件的资源引用路径含有文件MD5指纹，可以让资源缓存更久的时间。文件更新后文件指纹也相应的更新，不再受文件缓存而导致的前后端，开发与运维等全责不清导致的扯皮事件。
gulpfile.js文件配置如下所示。

'use strict';

//npm install gulp gulp-ignore gulp-htmlmin gulp-uglify gulp-clean-css gulp-rev gulp-rev-collector gulp-revplace gulp-if --save -dev
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),//压缩html
uglify = require('gulp-uglify'),//压缩js
cleancss = require('gulp-clean-css'),//压缩css
imagemin = require('gulp-imagemin'),//压缩image，特别耗资源建议不用
rev = require('gulp-rev'),//生成md5的文件指纹
//revcollector = require('gulp-rev-collector'),//感觉没什么用，和npm的说明没多少意义
overrideurl = require('gulp-rev-css-url'),//重写css中的url
revreplace = require('gulp-rev-replace'),//重写 md5指纹文件名
urlreplace = require('gulp-url-replace');//url 前缀修改

//img file encode
gulp.task('img', function(){
return gulp.src('static/{img,upload}/**/*.*', {base: './'})
// .pipe( imagemin() ) //特别消耗性能建议不要使用
.pipe( rev() )
.pipe(gulp.dest('/output'))
.pipe( rev.manifest() )//生成rev-manifest.json文件，内涵资源地址原地址和加了文件指纹地址对应的说明文件
.pipe( gulp.dest( '/output/static/img' ) );
})
//video font
gulp.task('video', function(){
return gulp.src('static/{video,font}/**/*.*', {base: './'})
.pipe( rev() )
.pipe(gulp.dest('/output'))
.pipe( rev.manifest() )
.pipe( gulp.dest( '/output/static/video' ) );
})
//js file encode and minify
gulp.task('js', function(){
return gulp.src('static/js/**/*.js', {base: './'})
.pipe( uglify())
.pipe( rev() )
.pipe(gulp.dest('/output'))
.pipe( rev.manifest() )
.pipe( gulp.dest( '/output/static/js' ) );
})
//css file encode and minify css
gulp.task('css', function(){
return gulp.src(['static/css/**/*.css'], {base : './'})
.pipe( cleancss({compatibility: 'ie7'}) )
.pipe( rev() )
.pipe( overrideurl() )
.pipe( gulp.dest('/output'))
.pipe( rev.manifest() )
.pipe( gulp.dest( '/output/static/css' ) );
})
//copy system file
gulp.task('copy',function(){
return gulp.src(['*.*','src/**','app/**'], {base: './'})
.pipe(gulp.dest( '/output' ) );
})
//update css/js/img file url in html file and minify
gulp.task('html', ['img', 'video' , 'js' , 'css'] ,function(){ //
var manifest = gulp.src("/output/static/**/rev-manifest.json");//这里指定文件，如果是泛匹配json文件，gulp-rev-replace插件在替换时可能出错
return gulp.src(['template/**/*.{html,htm,tpl,jsp,php,ftl}'], {base: './'})
//"/output/static/js/rev-manifest.json",
.pipe( revreplace({manifest: manifest}) )//根据指纹文件替换相应的资源连接地址
.pipe( urlreplace({
'/static/js':'//js.360shouji.com/static/js',
'/static/css':'//css.360shouji.com/static/css',
'/static/img':'//res.360shouji.com/static/img',
'/static/font':'//css.360shouji.com/static/font',
'/static/video':'//res.360shouji.com/static/video'
}))//资源文件引用地址添加域名
// .pipe( htmlmin() )//插件对模板类文件压缩比较鸡肋
.pipe( gulp.dest('/output') );
})
//update
gulp.task('col-css',['html'] , function() {
var manifest = gulp.src("/output/static/{css,video,font,img}/*.json");
return gulp.src(['/output/static/css/**/*.css'], {base: "./output"})
.pipe( revreplace({manifest: manifest}) )
.pipe( urlreplace({
'/static/img':'//res.360shouji.com/static/img',
'/static/font':'//css.360shouji.com/static/font'
}))
.pipe(gulp.dest('/output'));
});
gulp.task('watch',function(){
//暂时删除了
})

/* 执行所有 */
gulp.task('default',function(){
gulp.run( 'copy', 'col-css');
});

gulp.js执行结果

总共花费 36s 编译完成，copy文件花费 2分47秒



下一篇文章《【fis3学习】中大型项目构建发布实例》