利用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前，先介绍下我们今天要用到的一些插件

以上列出的插件为我个人常用的一些插件，如果你还有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，只需要几行命令便可以完成以上任务，使很多优化工作变得十分简单。

posted @ 2015-04-26 11:32  Ziv小威  阅读(4457)  评论(0)  编辑  收藏  举报