gulp+jsp初探

gulp

gulp简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css/jsp 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

入门

安装gulp

1.安装node.js

gulp是基于nodejs的，必须安装nodejs。windows直接去官网下载安装即可。

2.安装gulp

• 全局安装

  打开命令行窗口，执行命令 npm install -g gulp

• 局部安装

  命令行进入项目目录，执行命令 npm install –save-dev gulp

npm是nodejs的包管理器，管理插件的安装、卸载、升级等。

我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

3.使用taobao镜像
使用npm安装node插件，连接国外网站有时会因为网络问题而安装失败。我们可以npm的淘宝镜像，每10分钟同步与官方同步一次

npm config set registry http://registry.npm.taobao.org/

运行gulp

1.创建package.json

package.json是nodejs配置文件。可以按照格式手动创建。也可以在项目目录中执行命令npm init 按照提示一步一步输入创建。

2.创建gulpfile.js

gulpfile.js是gulp项目的gulp配置文件，手动创建即可。

简单示例：

 var gulp = require('gulp'); gulp.task('default',function(){ });

3.运行gulp

在项目目录执行命令gulp

4.插件下载及使用

在项目目录使用npm命令下载，如下载合并文件的插件gulp-concat：

npm install –save-dev gulp-concat

使用时如下：

在gulpfile.js中添加 var concat = require(‘gulp-concat’);

var gulp = require('gulp');var concat = require('gulp-concat');gulp.task('default',function(){  gulp.src('src/js/*.js')  .pipe(concat('all.js'))  .pipe(gulp.dest('dist/js'));});`````<div class="se-preview-section-delimiter"></div>## demo示例**注：gulp生成了新的目标文件，与源文件进行了隔离**1.css文件添加md5后缀<div class="se-preview-section-delimiter"></div>```javascriptvar gulp = require('gulp');var rev = require('gulp-rev');//生成md5后缀var notify = require('gulp-notify');gulp.task('css',function(){//css处理    gulp.src('src/main/webapp/static/css/*.css')//加载匹配的文件获取流    .pipe(rev())//文件名称家md5后缀    .pipe(gulp.dest('src/main/webapp/dest/css'))//输出目录    .pipe(rev.manifest({//将文件名称后缀一json形式保存        merge:true    }))    .pipe(gulp.dest('src/main/webapp/dest/rev/css'))//json文件目录    .pipe(notify({        message:'css done !'    //通知执行结果    }))    ;});gulp.task("default", ['css']);

在项目目录，执行gulp 或者 gulp css

2.合并及压缩css

gulp.task('cssmin',function(){//合并css    gulp.src('src/main/webapp/static/css/merge/*.css')    .pipe(concat('merge.css'))//合并文件名称    .pipe(cssmin())//压缩    .pipe(rev())//添加md5后缀    .pipe(gulp.dest('src/main/webapp/dest/css'))//输出处理后文件    .pipe(rev.manifest({//将文件信息已json形式保存至rev-manifest.json        merge:true    }))    .pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件输出目录    .pipe(notify({        message:'merge done !'    }))    ;});

3.替换

gulp.task('cssmin',function(){//合并css    gulp.src('src/main/webapp/static/css/merge/*.css')    .pipe(concat('merge.css'))//合并文件名称    .pipe(cssmin())//压缩    .pipe(rev())//添加md5后缀    .pipe(gulp.dest('src/main/webapp/dest/css'))//输出处理后文件    .pipe(rev.manifest({//将文件信息已json形式保存至rev-manifest.json        merge:true    }))    .pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件输出目录    .pipe(notify({        message:'merge done !'    }))    ;});```4.使用外部文件```javascriptvar config = require('./src/main/webapp/config/config.json');//引用外部配置文件//处理css或者js文件function doStuff(src,dest){    return gulp.src(src)    .pipe(rev())    .pipe(gulp.dest(dest))    .pipe(rev.manifest({        merge:true    }))    .pipe(gulp.dest(dest))    .pipe(notify({        message:'doStuff done !'    }))    ;}//处理jspfunction doJsp(manifest,src,dest){    return gulp.src([manifest+'/*.json',src])            .pipe(revCollector({                replaceReved:false,                 dirReplacements: {                'static/css': '../css'         }        }))        .pipe(gulp.dest(dest))        .pipe(notify({            message:'doJsp done !'        }))        ;}gulp.task('appcss',function(){    return doStuff(config.app.cssSrc,config.app.cssDest);});gulp.task('appreplace',['appcss'],function(){    return doJsp(config.app.cssDest,config.app.jspSrc,config.app.jspDest);});<div class="se-preview-section-delimiter"></div>

5.按顺序执行任务

var runSequence = require('run-sequence');//task顺序执行gulp.task('build',function(done){    runSequence(        ['js'],        ['css'],        ['cssmin'],        ['replace'],        done    );});

点此下载demo