怎樣安裝jshint插件?
先執行 cnpm install --save-dev jshint gulp-jshint
再執行 cnpm install gulp-jshint --save-dev
MAC終端怎樣安裝全局的插件?
MAC終端 安裝全局的插件 需要在最前面加上sudo
例如,在終端安裝淘寶的cnpm 命令行為:sudo npm install cnpm -g --registry=https://registry.npm.taobao.org
接著輸入MAC的密碼就OK了
有哪些常用的插件?
- gulp-sequence 順序執行
- gulp-jshint js語法檢測
- gulp-imagemin 圖片壓縮
- imagemin-pngquant 圖片壓縮(png)
- gulp-minify-css css壓縮
- gulp-uglify js壓縮
- gulp-htmlmin html壓縮(js、css壓縮)
- gulp-minify-html html壓縮(js模板壓縮)
- gulp-rev MD5版本號
- gulp-rev-collector 版本替換
- gulp-cache 緩存
一個新的項目,怎樣開始用gulp進行md5加密?
DOS 到項目的根目錄
為項目安裝gulp cnpm i gulp --save-dev
會生成node_modules文件夾和package.json文件
為項目安裝所需要的插件 cnpm i gulp-sequence --save-dev
寫gulpfile.js
var gulp = require("gulp"),
clean = require("gulp-clean-css"),
/*concat = require("gulp-concat"),
csso = require("gulp-csso"),
jshint = require("gulp-jshint"),
rename = require("gulp-rename"),*/
rev = require("gulp-rev"),
revCollector = require("gulp-rev-collector");
//uglify = require("gulp-uglify");
gulp.task('css', function () {
return gulp.src('src/resources/css/*.css')
//.pipe(csso())
.pipe(rev())
.pipe(gulp.dest('dist/resources/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/resources/css'))`
});
gulp.task('rev', function () {
return gulp.src(['dist/resources/**/*.json', 'src/*.html'])
.pipe(revCollector({
replaceReved : true
}))
.pipe(gulp.dest('dist/'));
});`
gulp.task('default', ['css', 'rev']);
用gulp進行前端構建的時候,用壓縮圖片插件gulp-imagemin,每次發布都需要重新壓縮一遍圖片,很慢,怎么解決?
用gulp-cache插件,原來10來分鐘的事情,幾十秒就搞定了。
gulp-cache的原理是 監控到圖片被改變了,替換了,才去壓縮。在一般的使用場景都不會有問題,
但如果僅僅是改變了圖片名字,則不會被替換。
eg: 把2016.png改成2017.png,壓縮出來的結果圖片為2016.png。
特殊處理:
gulp.task('cleanCash', function (done) {
return cache.clearAll(done);
});
gulp-clean-css gulp-minify-css 這兩個插件的區別?
gulp-minify-css已經被廢棄,請使用gulp-clean-css,用法一致。
需要的插件需要一個個的安裝太雞肋了,能不能批量安裝gulp插件?
在目錄下先npm init
,生成好package.json之后,npm install插件的時候,加--save-dev 參數,就自動存到package.json里了。
下一次到一個新的項目,把package.json文件拷貝進項目的根目錄,執行cnpm install
,就自動把package.json中的插件都一個個安裝進去了,很方便。