之前前端代码部署时用的是grunt，后来又出了个gulp工具，最近试用了一下，很方便，感觉比grunt简单好用，下面把一些常见的任务列一下，备用。
var gulp = require('gulp'); var sdir = '0.0.1'; var ddir = '0.0.1.release'; var gutil = require('gulp-util'); var clean = require('gulp-clean'); var minifyCSS = require('gulp-minify-css'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var processhtml = require('gulp-processhtml'); gulp.task('clean', function(){ return gulp.src(['./'+ddir+'/*'], {read:false}) .pipe(clean()); }); var filesToMove = [ './'+sdir+'/data/**/*.*', './'+sdir+'/img/*.*' ]; gulp.task('move', ['clean'], function(){ return gulp.src(filesToMove, {base: './'+sdir+'/' }) .pipe(gulp.dest('./'+ddir+'/')); }); gulp.task('concat-minify-css', ['clean'], function() { return gulp.src([ './'+sdir+'/css/style.css', './'+sdir+'/css/animate.css']) .pipe(concat('index.css')) .pipe(minifyCSS()) .pipe(gulp.dest('./'+ddir+'/css/')); }); gulp.task('concat-uglify-script-index', ['clean'], function() { return gulp .src([ "./"+sdir+"/js/jquery.js", "./"+sdir+"/js/main.js"]) .pipe(concat('index.js')) .pipe(uglify()) .pipe(gulp.dest('./'+ddir+'/js/')); }); gulp.task('processhtml', ['clean'], function () { return gulp.src('./'+sdir+'/*.html') .pipe(processhtml()) .pipe(gulp.dest('./'+ddir+'/')); }); gulp.task('default', function() { gulp.start( 'move', 'concat-minify-css', 'concat-uglify-script-index', 'processhtml'); });
关于processhtml大家用的可能较少，这里简单地介绍一下。
例如我们有这样一个文件：
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="main"></div> <script src="js/jquery.js"></script> <script src="js/main.js"></script> </body> </html>
最终我们希望代码压缩合并后，输出这样的文件：
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="main"></div> <script src="js/index.js"></script> </body> </html>
那么如何做呢，这里就要用到processhtml了，在需要替换的地方加个特殊标记，然后用processhtml进行替换处理，标记如下：
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <!--build:css css/index.css --> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--/build--> </head> <body> <div id="main"></div> <!--build:js js/index.js--> <script src="js/jquery.js"></script> <script src="js/main.js"></script> <!--/build --> </body> </html>
这个工具还是挺好用的。