公司項目需要優化，前端方面只要就是資源整合。拿另一個小項目試驗：

gulpfile.js

/**
 * Created by AAA on 2017/9/28.
 */
var gulp = require(‘gulp‘);
var del = require(‘del‘);
var autoprefixer = require(‘gulp-autoprefixer‘);
var uglify = require(‘gulp-uglify‘);
var cssmin = require(‘gulp-minify-css‘);
var fileinclude = require(‘gulp-file-include‘);
 
var htmlmin = require(‘gulp-htmlmin‘);
// 清除 dist 文件夾
gulp.task(‘clean‘, function () {
    return del.sync(‘./dist‘);
});
// html 整合
gulp.task(‘dealHtml‘, function () {
    gulp.src([‘src/view/**.html‘])
        .pipe(fileinclude({
            prefix: ‘@@‘,
            basepath: ‘@file‘
        }))
        .pipe(htmlmin({
            removeComments: 
 
true,//清除HTML註釋
            collapseWhitespace: true,//壓縮HTML
            collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true
 
,//刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
            minifyJS: true,//壓縮頁面JS
            minifyCSS: true//壓縮頁面CSS
        }))
        .pipe(gulp.dest(‘dist‘));
});
//靜態資源
gulp.task(‘dealJs‘, function () {
    gulp.src(‘src/view/assets/js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dist/assets/js‘));
});
gulp.task(‘dealCss‘, function () {
    gulp.src(‘src/view/assets/style/*.css‘)
        .pipe(autoprefixer({
            browsers: [‘last 2 versions‘, ‘Android >= 4.0‘],
            cascade: true, //是否美化屬性值 默認：true
            remove: true //是否去掉不必要的前綴 默認：true
        }))
        .pipe(cssmin({
            advanced: false,//類型：Boolean 默認：true [是否開啟高級優化（合並選擇器等）]
            compatibility: ‘ie8‘,//保留ie7及以下兼容寫法 類型：String 默認：‘‘or‘*‘ [啟用兼容模式； ‘ie7‘：IE7兼容模式，‘ie8‘：IE8兼容模式，‘*‘：IE9+兼容模式]
            keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
            keepSpecialComments: ‘*‘//保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
        }))
        .pipe(gulp.dest(‘dist/assets/style‘));
});
gulp.task(‘dealImgs‘, function () {
    gulp.src(‘src/view/assets/pic/*.*‘)
        .pipe(gulp.dest(‘dist/assets/pic‘));
});
gulp.task(‘data‘, function () {
    gulp.src(‘src/view/assets/data/*.json‘).pipe(gulp.dest(‘dist/assets/data‘));
});
gulp.task("build", ["dealCss", "dealJs", "dealImgs", "data"]);
// 監控html
gulp.task(‘watch‘, function () {
    gulp.watch(‘src/view/*.*‘, [‘dealHtml‘]);
    gulp.watch(‘src/view/assets/*/*.*‘, ["build"]);
});

package.js

{
  "name": "huangzi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-file-include": "^1.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.2.0",
    "gulp-htmlmin": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

項目目錄

控制臺運行：

gulp watch //開發

gulp build //打包

講真，有了webpack在前，gulp簡直就是小天使

gulp簡單使用