用gulp清除、移動、壓縮、合並、替換代碼

本文轉載自查看原文 2015-02-06 17:34 2303 gulp/ 工具軟件

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

這個工具還是挺好用的。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 gulp壓縮合並代碼 gulp css 壓縮合並一篇遲到的gulp文章，代碼合並壓縮，less編譯 gulp入坑系列(2)——初試JS代碼合並與壓縮 java模板引擎替換代碼關於用gulp合並壓縮seaJs模塊 Gulp學習指南之CSS合並、壓縮與MD5命名及路徑替換 gulp學習指南之CSS合並、壓縮與MD5命名及路徑替換 gulp打包壓縮代碼以及圖片如何使用gulp丑化壓縮代碼