**
const gulp = require('gulp');
const clean = require('gulp-clean');
const fileinclude = require('gulp-file-include');
const rev = require('gulp-rev');
const revreplace = require('gulp-rev-replace');
const uglify = require('gulp-uglify');
const cssmin = require('gulp-cssmin');
const spriter = require('gulp-css-spriter');
const plumber = require('gulp-plumber');
const htmlmin = require('gulp-htmlmin');
const sass = require('gulp-sass');
const runsequence = require('run-sequence');
const webpackstream = require('webpack-stream');
const named = require('vinyl-named');
const path = require('path');
const config = ;
const webpackconfig = }],
externals:['$','zepoto']
}};const tempdir = path.resolve(__dirname, 'temp');//臨時目錄
//清理目標資料夾/檔案
gulp.task('clean', function
() ));
});//用於在html檔案中直接include檔案 並儲存到目標路徑
gulp.task('fileinclude', function
() ))
.pipe(gulp.dest(config.view));
});//將拷貝到目標目錄
gulp.task('copy:img', function
() );
//css 壓縮 檔名新增md5
gulp.task('build:css', function
() } */
spritesheet: config.public + '/img/spritesheet' + timestamp + '.png',//img儲存路徑
pathtospritesheetfromcss: '../img/spritesheet' + timestamp + '.png'
//在css檔案中img的路徑
})).pipe(cssmin()) //壓縮
.pipe(gulp.dest(path.join(config.public, 'css')))
.pipe(rev.manifest())
.pipe(gulp.dest(path.join(tempdir, 'rev/css')));
});//js 打包 壓縮 混淆 檔名新增md5
gulp.task('build:js', function
() );
// 將html的css js 引用路徑 替換為 修改(增加md5)後的路徑 並壓縮
gulp.task("revreplace", function
() if (filename.indexof('.scss') > -1)
},modifyreved: (filename) =>
if (filename.indexof('.css') > -1) }};
return gulp.src(config.view + '/*.html')
.pipe(revreplace(revreplaceoptions))
.pipe(htmlmin())
.pipe(gulp.dest(config.view));
});const watchfiles = ['js/**/*.js', 'css/*.css', 'css/*.sass', 'css/**/*.scss', 'html/**/*.html'];
gulp.task('watch', function
() );
});});gulp.task('dev', ['default', 'watch']);
gulp.task('default', function
(done) );
預設情況下，任務會以最大的併發數同時執行 – 也就是說，它會不做任何等待地將所有的任務同時開起來。如果你希望建立乙個有特定順序的序列的任務鏈，你需要做兩件事：
gulp 的任務執行不能很好的控制順序 使用run-sequence
gulp執行任務出錯時 就會退出程式不再監控 使用gulp-plumber 防止css js 出錯時退出
監控js css html img
任務default是乙個完整的流程 檔案的拷貝 壓縮 打包 等
監控時應根據不同的檔案變更 執行相應任務 這樣效率更佳
但是每個乙個檔案變更導致其它任務也應執行，還是執行完整任務來的簡單且不易出錯 效率不行的話 就換電腦
命令形式 node new
const readline = require('readline');
const fs = require("fs") ;
let pagename = null;
//建立readline介面例項
const rl = readline.createinte***ce();
rl.question("頁面名是什麼？",function
(answer)
.html`))已經存在`);
process.exit(0);
} let basehtml=`
@@include('./common/head.html')
'container'>
@@include('./common/foot.html')
`; fs.writefile(__dirname + `/html/$.html`, basehtml, , function
(err)
else .html`);
}});
fs.writefile(__dirname + `/css/$.scss`, '', , function
(err)
else .scss`);
}});
fs.writefile(__dirname + `/js/$.js`, '', , function
(err)
else .js`);
}});
});
換成 gulp-htmlmin
換成 gulp-rev-replace 並且在build任務中將rev(新增md5) 執行步驟放在less(編譯前面)；保證了名字還是.less時加入到rev-mainfest.json.
新增配置項
modifyunreved: (filename) =>
if (filename.indexof('.less') > -1)
}, modifyreved: (filename) =>
基於gulp的前端自動化方案
最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
基於gulp的前端自動化方案
最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...