用gulp清除、移动、压缩、合并、替换代码

浏览数：20 / 时间：2015年06月11日

之前前端代码部署时用的是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>