怎样安装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中的插件都一个个安装进去了,很方便。