在前端构建过程中,使用了 gulp 工具。本文会列举一些常用的 packages,帮助我们管理前端资源,进行持续构建,自动部署。
引子
-
node
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. -
npm
npm 是 Node.js' package ecosystem,the package manager for javascript. - gulp:gulp doc in GitHub,gulp API docs
yargs
- npm i yargs --save-dev
- var argv = require('yargs').default('site', 'www').string(['ver']).argv;
当 --ver=1.0 时,如果不指定 string(),则会将 ver 解释为 1;通过 ver 分版本部署; - Tell users how to use yer options and make demands.
var argv = require('yargs')
.usage('Usage: $0 -w [num] -h [num]')
.demand(['w','h'])
.argv;
gulp-connect
npm install --save-dev gulp-connect
gulp-file-include
gulp-file-include:a gulp plugin for file include;
npm install --save-dev gulp-file-include
gulp-uglify
gulp-uglify: Minify files with UglifyJS;
npm install --save-dev gulp-uglify
指定 mangle 参数:Pass false to skip mangling names:uglify({mangle:false}),在发生问题时,可以帮助定位。
gulp-clean-css
gulp plugin to minify CSS, using clean-css. 替代原来的 gulp-minify-css,用法一致。
npm install gulp-clean-css --save-dev
css Compatibility settings(兼容 IE 版本问题)
设置 {compatibility: 'ie7'} 选项好像有问题,建议不要使用;
gulp.spritesmith
- 将小图片合并为一张图片;
- CSS Sprite Management with Gulp;
- 相似:sprity
图片压缩
- gulp-imagemin;
- 无损压缩;