gulp可用来对前端代码进行预处理、压缩、发布等处理。本文简单探索它在具体项目中的应用方式。

一、开发环境搭建

。Gulp的安装和使用请参考文章：http://segmentfault.com/a/1190000000372547

二、gulp在项目中的应用

2.1 前端目录结构

以具体的项目为例，前端的项目目录结构如下图：

2.1.1 原始文件

最原始的前端文件方在文件夹resources-src中，此文件夹下又有多个文件。
Resources-src/node_modules: gulp插件库。
Resources-src/gulpfile.js: gulp处理文件， 对前端进行处理的主要逻辑在这里编写

Resources-src/css:未经压缩的前端css 文件。
Resources-src/images:图片文件。
Resources-src/js:未经压缩的前端js 文件。
Resources-src/views:未经压缩的前端html 文件。
Resources-src/less:未经编译的前端css 文件。注意：less下的文件需要通过gulp任务进行编译， 将生成的css文件保存在Resources-src/css下。

2.1.2 发布文件

Resources文件夹下存放了发布后的js,css图片文件。
WEB-INF/views 文件夹下存放发布后的html文件。

2.2 服务器配置

为了开发的时候调试方便， 我们在开发环境中， 前端页面直接访问未压缩的文件。 而在实际的生产环境中， 页面访问的是压缩发布后的文件。 因此在服务器端，我们需要两套配置， 分别对应开发时的配置和生产时的配置， 如下图。

2.3 编写gulpfile.js

Gulp任务主要完成编译less文件生成css文件， 压缩并发布css文件， 压缩并发布js文件， 压缩并发布html文件这几个任务。下面是个实际的例子

// 引入相关的gulp插件
var gulp = require(‘gulp’),
minifycss = require(‘gulp-minify-css’),
minifyHtml = require(“gulp-minify-html”);
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglify’),
rename = require(‘gulp-rename’),
del = require(‘del’);
less = require(‘gulp-less’);

// 这里作为入口任务， 启动对下列所有任务的执行
gulp.task(‘runAll’, [‘deploy-css’]);

// 压缩并部署html
gulp.task(‘deploy-ftl’, function () {
gulp.src(‘views/**/*’)
.pipe(minifyHtml())
.pipe(gulp.dest(‘../WEB-INF/views/’))
});

// 压缩并部署js
gulp.task(‘deploy-js’,[‘deploy-ftl’], function () {
gulp.src(‘js/**/*’)
.pipe(uglify())
.pipe(gulp.dest(‘../resources/js/’))
});

// 编译less, 生成css(bootstrap)
gulp.task(‘compile-bootstrap-less’,[‘deploy-js’], function () {
gulp.src(‘less/bootstrap/bootstrap.less’)
.pipe(less())
.pipe(minifycss())
.pipe(rename(“bootstrap.min.css”))
.pipe(gulp.dest(‘lib/bootstrap-3.3.5-dist/css/’))
});

// 压缩并部署css(bootstrap)
gulp.task(‘deploy-bootstrap-css’,[‘compile-bootstrap-less’], function () {
gulp.src(‘lib/bootstrap-3.3.5-dist/css/bootstrap.min.css’)
.pipe(minifycss())
.pipe(gulp.dest(‘../resources/lib/bootstrap-3.3.5-dist/css/’))
});

// 压缩并部署css
gulp.task(‘deploy-css’,[‘deploy-bootstrap-css’], function () {
gulp.src(‘css/**/*’)
.pipe(minifycss())
.pipe(gulp.dest(‘../resources/css/’))
});

2.4 执行gulp任务

在已经安装了gulp开发环境的前提下， 使用命令提示符（或终端）进入resources-src文件夹， 执行命令 gulp runAll, 上述示例文件中的所有gulp任务就会依次执行了。