【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 -devvar 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 encodegulp.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 fontgulp.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 minifygulp.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 cssgulp.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 filegulp.task('copy',function(){     return gulp.src(['*.*','src/**','app/**'], {base: './'})        .pipe(gulp.dest( '/output' ) );})//update css/js/img file url in html file and minifygulp.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学习】中大型项目构建发布实例》