最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化、工程化、自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。
你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫的是匹配所有的目錄和檔案。我簡單舉個例子：這裡js/common裡的js檔案也會被處理。如果只想處理特定目錄的檔案，請修改任務裡的路徑。
demo/
├── css/
│ ├── index.css
├── js/
│ ├── common/
│ │ └─ common.js
│ ├── index.js
├── img/
│ ├── logo.png
└── index.html
複製**
package.json檔案內容
,
"devdependencies":
}複製**
gulpfile.js檔案,並引入所需模組，這裡我把路徑統一寫在paths中。具體關於路徑的寫法，可以去看gulp官網的api：www.gulpjs.com.cn/docs/api/
gulp-minify-css這個官網提示已經棄用，改用gulp-clean-css，這裡保留只是為了告訴大家，效果一樣，使用者一致，為了保證專案不出問題，還是用最新的吧。
'use strict';
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),//壓縮css 已棄用
cleancss = require('gulp-clean-css'),//壓縮css
imagemin = require('gulp-imagemin'),//壓縮
autoprefixer = require('gulp-autoprefixer'),//處理瀏覽器字首
uglify = require('gulp-uglify'),//壓縮js
sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap
gulpif = require('gulp-if'),//條件判斷
notify = require('gulp-notify'),//處理報錯
cache = require('gulp-cache'),//只壓縮修改的
htmlclean = require('gulp-htmlclean'),// 精簡html
htmlmin = require('gulp-htmlmin'),//壓縮html
sequence = require('gulp-sequence'),//同步執行任務
paths = ',
css: '**/*.css',
img: '**/*.',
js: '**/*.js'
}複製**
這裡需要排除node_modules資料夾和生成構建的後的目錄/dist/及它們的子目錄，直接!後面跟要排除的目錄就行了。
gulp.task('minify-css', function () ))
.pipe(cleancss())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.dest))
.pipe(notify());
});複製**
jquery',bootstrap，也或者是公司內部的公共庫 .min.等等。
這裡咱們就用到gulp-if了，去排除min.css
var conditioncss = function (f)
return
true;
};複製**
.pipe(gulpif(conditioncss, cleancss()))
複製**
同理排除下 min.js ，這裡還要注意記得把 gulp指令碼也排除不處理。
gulp.task('minify-js', function () ));
});複製**
gulp.task('minify-img', function () );
複製**
gulp.task('minify-html', function () ))
.pipe(gulp.dest(paths.dest));
});複製**
gulp.task('rev', function () );
複製**
因為gulp所有的任務都是非同步完成的，在有時候我們需要同步執行任務，比如：先編譯less,在對編譯好的css進行壓縮，這個時候非同步就有問題了。
gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html'));
複製**
這裡建立乙個名為default的任務，執行上面的deploy任務
gulp.task('default', ['deploy'], function (e) )
複製**
gulp或者gulp default執行構建，即可在我們設定的產出目錄裡看到我們壓縮處理後的**。 基於gulp的前端自動化方案
最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...
基於gulp的前端自動化方案
最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...
使用gulp實現前端自動化
const gulp require gulp const clean require gulp clean const fileinclude require gulp file include const rev require gulp rev const revreplace require...