最近換了家新公司，由于是創業公司，項目基本從零開始搭建。工作幾年，也沒想過寫點什么技術性的東西，今天突然心血來潮，哦當然，我這個人總是特別容易心血來潮，不定想干點啥，不說廢話了，畢竟上班呢，開小差也不太好。忙了一個月，項目初見雛形，也基本可以1.0上線了，趁著等文案的時間，簡單寫點gulp打包的東西，等明兒有空再來一篇詳細的，再有空再來個webpack的，哎呀，這個有空也不知道是啥時候，莫怪，好像又廢話了幾句。stop，stop。

從頭兒來吧，首先創建一個package.json文件，就npm init一直確認確認確認就好了，構建過程中用到什么就npm什么就好了。做過vue腳手架的小伙伴兒應該知道，腳手架會自動生成一個特別全面的package.json文件，當然我們目前也用不到那么多。不多說了。

為了萬一以后添加強大的功能，我們就多做幾個文件，就不是僅僅一個gulpfile.js了，當然一個也沒問題。

來創建一個gulpfile.config.js來專門放置文件路徑引用輸出等。就是所謂的src，dist。再來一個gulpfile.xxx.js，名字隨便起吧，引用的時候引用對就好了。再來一個gulpfile.js吧，最后要運行啊。

做個最簡單例子，以js壓縮為例，稍后加上版本哈管理功能，用法都差不多，用什么加什么。

var src_file = './xxxx/'; // 你的源文件目錄var dist_file= './dist/xxxx/'; // 文件處理后你想存放的目錄var config= {src: src_file,dist: dist_file,js: {  src: src_file + 'src/js/**/*.js',      // 你的js目錄  dist: dist_file + 'src/js',         // js文件打包后存放的目錄  },};module.exports = config;

這只是個最簡單的小例子，要是有其它的往里加就好了，html，css，img，還有一些靜態文件等。

關鍵的來了，我們把處理方法寫在gulpfile.xxx.js里面。

gulpfile.xxx.js：

var gulp = require('gulp');var rename = require('gulp-rename'); //重命名var babel = require("gulp-babel");var uglify = require('gulp-uglify'); //js壓縮var config = require('./gulpfile.config.js');var runSequence = require('run-sequence');var rev = require('gulp-rev');//版本號管理的一些東西，先寫進來吧，懶的在敲了var revCollector = require('gulp-rev-collector');var cssUrl = './dist/xxx/src/css/*.css',   jsUrl = './dist/xxx/src/js/*.js';function haha() {  gulp.task('js', function () {    return gulp.src(Config.js.src)          .pipe(babel())          .pipe(uglify())          .pipe(gulp.dest(config.js.dist));    });  gulp.task('revJs', function(){    return gulp.src(jsUrl)          .pipe(rev())          .pipe(rev.manifest())          .pipe(gulp.dest('dist/xxx/src/js'));  });  gulp.task('revHtml', function () {        return gulp.src(['dist/xxx/src/js/**/*.json', 'chaohuo/*.html']) /*后面本地html文件的路徑，可自行配置*/          .pipe(revCollector(            { replaceReved:true }            ))          .pipe(gulp.dest('dist/chaohuo')); /*Html更換css、js文件版本,和本地html文件的路徑一致*/  });  gulp.task('dev', function (done) {      condition = false;      runSequence(          ['revJs'],          ['revHtml'],    done);});    gulp.task('default', ['js','dev']);}module.exports = haha;