官網專案結構如圖：

需安裝的外掛package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.0",
    "gulp-css-spriter": "^0.3.3",
    "gulp-declare": "^0.3.0",
    "gulp-handlebars
 
": "^4.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-replace": "^0.5.4",
    "gulp-ruby-sass": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "gulp-watch-path": "^0.1.0",
    "gulp-wrap": "^0.13.0"
 
,
    "stream-combiner2": "^1.1.1"
  },
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.2",
    "gulp-htmlmin": "^2.0.0",
    "gulp-rename": "^1.2.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license
 
": "ISC"
}

gulpfile.js配置檔案

var gulp = require('gulp');
var minifyHTML = require('gulp-htmlmin');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var concat = require('gulp-concat');
var del = require('del');
var replace = require('gulp-replace');
gulp.task('minifyHTML', function () {
    gulp.src('*.html')
        .pipe(minifyHTML({collapseWhitespace: true}))
        .pipe(replace(/<script.*?>.*?>|<link.*?>|<\/head>/g, function (tag) {
            if (/<link.*?>/.test(tag)) {
                return "";
            } else if (/<\/head>/.test(tag)) {
                return '<link rel="stylesheet" href="css/all.css"></head>';
            }
        }))
        .pipe(gulp.dest('dist'));
});
gulp.task('script', function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(concat(new Date().getTime() + ".min.js"))//全部合併到all.js這個檔案裡
        .pipe(gulp.dest('dist/js'))
});
gulp.task('css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCSS())
        .pipe(concat('all.css'))
        .pipe(gulp.dest('dist/css'));
});
gulp.task('images', function () {
    gulp.src('images/*.*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/images'));
});
gulp.task('clean', function (cb) {
    del([
        /*  'dist/report.csv',
        // 這裡我們使用一個通配模式來匹配 `mobile` 資料夾中的所有東西
        'dist/mobile/!**!/!*',
        // 我們不希望刪掉這個檔案，所以我們取反這個匹配模式
        '!dist/mobile/deploy.json'*/
        'dist/*'
    ], cb);
});
gulp.task('default', ['clean', 'minifyHTML', 'script', 'css', 'images']);