利用Gulp优化部署Web项目[长文慎入]

Gulp

Gulp是一款项目自动化的构建工具，与Grunt同样能够经过建立任务（Task）来帮助咱们自动完成一些工做流的内容。固然，今天咱们的内容并非讨论这两者的区别，仅仅是介绍介绍如何利用Gulp来优化咱们的Web项目中前端自动化工做流。

引言

相信很多人看过百度大牛张云龙的那篇讲解大公司里怎样开发和部署前端代码?的文章，若是没有阅读的朋友请戳。因为在项目部署时，咱们须要对项目js，css,image等文件进行压缩，合并处理，从而减小客户端对服务Http请求，已达到加强页面的加载速度，优化服务器带宽压力等等目的。因此本文主要讲的是利用Gulp优化咱们Web部署优化工做。

安装&初始化

首先你得确保你的电脑上面是否已经安装了Nodejs, 若是没有安装的话，那么请移步。假定有以下一个Nodejs的Web项目（固然你也能够是其余的例如Java，.Net的Web项目，且具体开发目录以下：

|- project
    |- src // 前端项目的源文件
        |- js 
        |- html
        |- images
        |- css
        |- bower_component // bower 前端依赖包管理
        |- node_component // nodejs 插件
    |- server
        |- api
        |- views
            |- app
        |- assets // 前端静态文件存放目录
            |- js
            |- css
            |- images
            |- templates
        |- ... // 其余目录就不一一列出了

src文件夹为前端的js，css, html, image的开发目录, 咱们会经过gulp将这些源文件进行压缩合并后打包到目标目录，也就是assets目录下相应的js,css目录，html视图文件会打包到views下的app文件夹和assets下的templates模板文件夹，具体视状况而定。其中的bower_component为bower前端包管理，咱们能够用bower直接下载几乎任何咱们前端平常所需的库，框架,并且能够任选版本，例如JQuery,Bootstrap,Angular，只需执行bower install packageName便可，不一样版本只需bower install packageName#version,更多内容，能够去官网自行查阅，这里就不展开了。至于node_component 文件夹便是用npm安装的咱们打包会用到的插件资源了。

1. 全局安装Gulp

   $ npm install --global gulp

2. 安装Gulp到开发项目中

   $ npm install --save-dev gulp

3. 在src建立gulpfile.js文件，这个文件用来配置咱们所需的task,接下来会具体讲解。

4. 执行

   $ gulp 
   或者
   $ gulp taskName

   gulp会执行gulpfile.js文件下定义的default任务，若是咱们须要执行特定的task，则须要执行下面的命令

gulpfile.js文件

gulpfile.js用来定义咱们须要自动化的任务，里面包含了不少依赖关系。这里咱们会建立4个Task，第一个develop task,用于开发时使用，另外一个release task,用于部署发布时用的，还有一个watch task, 用于实时监听文件修改行为，可及时打包，最后一个default task, gulp默认执行的task.

建立Default Task

var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here }); // 若是默认状况下咱们会执行一个叫develop的task，则这么写，执行gulp命令时， // 会自动调用develop gulp.task('default', ['develop']);

建立Develop Task

建立develop task前，先介绍下咱们今天要用到的一些插件

• gulp-uglify Js压缩插件
• gulp-minify-css Css压缩插件
• gulp-imagemin 图片压缩插件，支持格式： PNG, JPEG, GIF and SVG images
• gulp-strip-debug 清除源文件console,debugger代码
• gulp-useref 合并压缩html文件中的文件

以上列出的插件为我我的经常使用的一些插件，若是你还有fonts文件的话，也能够添加进去，gulp有不少其余或者类似的插件，均可以去google搜索。安装方法则是正常的npm安装，能够戳进官网去查看。

首先咱们须要为咱们要压缩的源文件配置路径以及导入插件，假设咱们bower里面已有jquery和bootstrap插件，以及其余源文件目录，以下：

// 引入插件 var uglify = require('gulp-uglify'); // 压缩 var minifyCss = require('gulp-minify-css'); var stripDebug = require('gulp-strip-debug'); // 该插件用来去掉console和debugger语句 var useref = require('gulp-useref'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); // 任务处理的文件路径配置 var paths = { js: [ // js目录 'app/*' ], css: [ 'css/*' ], img: [ 'images/*' ], html: [ 'html/*' ], lib: { // 第三方依赖文件 js: [ 'bower_components/bootstrap/dist/js/bootstrap.js', 'bower_components/jquery/jquery.js' ], css: [ 'bower_components/bootstrap/dist/css/bootstrap.css' ], img: [ 'bower_components/bootstrap/dist/images/*' ] } };

定义develop task

var output = "../server/assets/"; // output /* 开发环境 */ gulp.task('develop', function() { gulp.src(paths.js) .pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js) .pipe(gulp.dest(output + '/js')); gulp.src(paths.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.img) .pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img) .pipe(gulp.dest(output + '/images')); });

上面的develop task直接将代码都输出到了咱们的server目录下，并未经过插件进行相应的处理，主要是由于咱们等会还会建立release task， 当真正部署的时候咱们才进行压缩合并这些处理。

定义release task

/* 部署环境 */ gulp.task('release', function() { gulp.src(paths.js) .pipe(stripDebug()) .pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js) .pipe(stripDebug()) .pipe(gulp.dest(output + '/js')); gulp.src(paths.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.img) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest(output + '/images')); var assets = useref.assets(); gulp.src(paths.html) .pipe(assets) .pipe(gulpif('*.js', uglify())) .pipe(gulpif('*.css', minifyCss())) .pipe(assets.restore()) .pipe(useref()) .pipe(gulp.dest(output + '/templates')); }); 

上面的代码首先是先打包静态文件到指定包，去掉多余的console,debugger,给图片文件进行压缩处理，最后利用useref插件对ejs视图文件中的js,css进行压缩合并处理，并打包到指定目录。

利用useref对html内部的文件进行压缩合并

上面的release中咱们以及定义了对app目录下html文件内部的js，css进行压缩何须，仅仅配置task是还不够的，我还须要在html内部作以下配置：

<html> <head> <!-- build:css css/main.css --> <link href="css/style.css" rel="stylesheet"> <link href="css/bootstrap.cs.css" rel="stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js scripts/main.js --> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!-- endbuild --> </body> </html>

通过合并后的文件：

<html> <head> <link rel="stylesheet" href="css/main.css"/> </head> <body> <script type="text/javascript" src="js/main.js"></script> </body> </htm>

更多关于gulp-useref的使用方法请戳。

定义watch Task

watch task 是为了监听文件发生改变后当即触发的任务，已便于咱们开发。代码以下：

var watcher = gulp.watch(paths.scripts, ['develop']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file });

总结

以上基本介绍了如何使用gulp来自动完成打包，压缩，合并文件等任务，Gulp插件很是多，本文只是简单的介绍了几种基本的。总之，使用gulp，只须要几行命令即可以完成以上任务，使不少优化工做变得十分简单。

• 原文地址：http://imziv.com/blog/article/read.htm?id=60
• 做者： Ziv小威