之前前端代码部署时用的是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>
这个工具还是挺好用的。
新闻热点
疑难解答
