Gulp 之二
Gulp学习2
之前已经配置过一篇啦， 只不过那次是针对browserify
你的工程文件夹要安装Gulp
你需要有package.json 不能是空文件哦 至少得有个{}才行,要不然npm不知道如何填写依赖，--save-dev会报错的
$ npm install gulp --save-dev
国内环境要用cnpm哟！
需要哪些插件呢
- sass的编译（gulp-ruby-sass）
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）
- 图片缓存，只有图片替换了才压缩（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
可以一口气安装他们
cnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
gulp-notify
gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging
del
Delete files/folders using globs
rimraf
The UNIX command rm -rf for node
gulp-cache
原博这么说的
Grunt的imagemin插件就利用了缓存来避免重复压缩，而Gulp要利用gulp-cache来完成，当然啦，不仅限定于缓存图片。
比如之前build的时候已经压缩了img中的图片 后来又添加了一张 有了cache就可以避免重复压缩已经有的三张
gulp-autoprefixer
Autoprefixer的每个版本都包含一份最新的 Can I Use 数据
Autoprefixer默认将支持主流浏览器最近2个版本
主流浏览器最近2个版本用“last 2 versions”；
全球统计有超过1%的使用率使用“>1%”;
大于某个版本用“ff>20”或"ff>=20".
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
OR
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
目录结构
-src
--styles
-dist
--assets
---css
运行&&更新
注册一个任务
gulp.task('styles', function() {....});
假如你只想运行这一个task gulp styles
那么如何一口气运行多个任务呢
gulp.task('default', ['watch', 'scripts', 'images']);
自动更新是最重要的， 免得我再敲命令嘛
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch('src/styles/*.*', ['styles']);
});
gulp.task('default', ['watch','styles']);
显然这里是针对文件改变后重新编译 页面并没有刷新
样式
sass的编译使用 gulp-ruby-sass
不用gulp-sass的原因是这个太大了 下载安装要很久 而且容易安装失败（它还依赖node-sass）
原博可能因为时间早的缘故，其写法目前是不能跑通的
gulp-ruby-sass Offcial Site
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
return sass('source/file.scss')
.on('error', sass.logError)
.pipe(gulp.dest('result'));
});
其它
//image
gulp.task('images', function() {
return gulp.src('src/styles/imgs/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/css/img'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('scripts', function() {
gulp.src('src/scripts/lib/*.js')
.pipe(concat('lib.js'))
.pipe(gulp.dest('dist/js/lib'));
// Minify and copy all JavaScript (except vendor scripts)
// with sourcemaps all the way down
return gulp.src('src/scripts/*.js')
.pipe(sourcemaps.init())
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
reload
原博用的是gulp-livereload 但是我没有懂他是如何用这个livereload的
没看到原博是如何关联 自己的服务器和 gulp-livereload
可能是因为原博需要安装一个Chrome插件 所以不再代码中关联 这个解决办法并不好
用gulp-connect可以帮助我们自动刷新
gulp-connect Official Site
实际上它是 connect 和 gulp-livereload 的再封装
我们需要建立一个服务器
gulp.task('connectDist', function () {
connect.server({
root: 'dist',
port: 8001,
livereload: true
});
});
然后如果文件改变了 就让当前服务器刷新
gulp.task('styles', function() {
return rsass('src/styles/main.scss')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload())
.pipe(notify({ message: 'Styles task complete' }));
});
当然了你的默认任务里面要加上服务器这一个
gulp.task('default', ['connectDist','styles','images','scripts','html','watch']);
browser-sync
和gulp-connect差不多的方式
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./dist"
}
});
gulp.watch('sass/demo.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('src/scripts/*.js', ['scripts']).on('change', browserSync.reload);
gulp.watch('src/styles/imgs/*', ['images']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
//使用 gulp-ruby-sass
gulp.task('styles', function() {
rsass('src/styles/main.scss', { sourcemap: true })
.on('error', sass.logError)
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
// For inline sourcemaps
.pipe(sourcemaps.write())
// For file sourcemaps
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: 'src/styles'
}))
.pipe(gulp.dest('dist/css/'))
.pipe(reload({stream: true}))
.pipe(notify({ message: 'Styles task complete' }));
});
Gulp的任务重一定要有return吗
http://stackoverflow.com/questions/21699146/gulp-js-task-return-on-src
https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
return 用在存在依赖的task中
默认情况下Gulp同时并行运行所有任务 但是有些任务是依赖前面任务运行结果的
所以用return
gulp.task('two', ['one'], function() {
// task 'one' is done now
});
