工作中对于工程的构建往往习惯于使用Gulp,Gulp有许多插件辅助其工作。下面就是对这些插件的一个总结,方便在以后的使用中方便查找。
gulp
安装:
npm install gulp --save-dev
gulp-minify-css - 压缩CSS
安装:
npm install gulp-minify-css --save-dev
使用:
var minifyCss = require('gulp-minify-css')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(minifycss());
});
gulp-jshint - 语法检查
安装:
npm install gulp-jshint --save-dev
使用:
var minifyCss = require('gulp-jshint')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'));
});
我们需要指定JSHint一个reporter。这裡我使用预设的reporter,适用于大多数人。更多有关此设定,你可以在JSHint网站取得。
gulp-uglify - 丑化,压缩js
安装:
npm install gulp-uglify --save-dev
使用:
var uglify = require('gulp-uglify')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(uglify());
});
gulp-rename - 重命名
安装:
npm install gulp-rename --save-dev
使用:
var rename = require('gulp-rename')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(rename({suffix: '.min'}));
});
gulp-clean - 清理文件
安装:
npm install gulp-clean --save-dev
使用:
var clean = require('gulp-clean')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'],{read: false})
.pipe(clean());
});
因为我们不想要读取已经被删除的档案,我们可以加入read: false选项来防止gulp读取档案内容–让它快一些。
gulp-concat - 拼接
安装:
npm install gulp-concat --save-dev
使用:
var concat = require('gulp-concat')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'],{read: false})
.pipe(concat('main.js'));
});
gulp-less - 编译less
安装:
npm install gulp-less --save-dev
使用:
var less = require('gulp-less')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(less());
});
gulp-ruby-sass - 编译sass
安装:
npm install gulp-ruby-sass --save-dev
使用:
var sass = require('gulp-ruby-sass')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(sass({ style: 'expanded' }));
});
gulp-autoprefixer - 前缀
安装:
npm install gulp-ruby-sass --save-dev
使用:
var autoprefixer = require('gulp-autoprefixer')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
});
gulp-imagemin - 图片压缩
安装:
npm install gulp-imagemin --save-dev
npm install gulp-cache --save-dev
使用:
var imagemin = require('gulp-imagemin')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
});
这会将对所有来源图片进行imagemin处理。我们可以稍微更进一步,利用快取保存已经压缩过的图片,以便每次进行此任务时不需要再重新压缩。这裡只需要gulp-cache外挂–稍早已经安装。我们需要额外设置才能使用这个外挂,因此修改这段程式码:
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
});
gulp-notify - 报错
安装:
npm install gulp-notify --save-dev
使用:
var notify = require('gulp-notify')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(notify({ message: 'Images task complete' }));
});
gulp-cache
安装:
npm install gulp-cache --save-dev
使用:
配合gulp-imagemin使用
gulp-livereload - 即时重整
第一步
安装:
npm install gulp-livereload --save-dev
使用:
// 建立即时重整伺服器
var server = livereload();
// 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});
第二步:安装 chrome 插件。点我就去安装
此时,你会发现当你修改 app 文件夹下的任何文件,命令行都会有内容输出,说明能够监控到文件的变化,运作正常了。
第三步: 以服务器的方式打开页面,例如 localhost:3000,而不是 file:///F:/web/app/index.html 接着点击刚刚安装的 chrome插件 ,中间变为实心黑色圆点表示开始运作了。
browser-sync - 浏览器自动刷新
安装:
npm install rowser-sync --save-dev
使用:
var browserSync = require('browser-sync');
gulp.task('watch', function() {
gulp.watch('app/*.html', ['html', browserSync.reload]);
});
gulp.task('default', ['watch'], function() {
browserSync({
server: {
baseDir: “项目根目录”
}
});
});
browserify - 组件管理
安装:
npm install browserify --save-dev
使用:
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
browserify()
.require(dependencies)
.bundle()
.pipe(source('lib.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(jsPath));
browserify({
entries: './app/js/index.js',
extensions: ['.js', '.jsx']
}).external(dependencies)
.transform(reactify)
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(jsPath));