gulp有很多组件,下面介绍一些组件用户构建web项目。
gulp-connect
gulp-connect用户在本地运行web服务器,用于本地开发、测试web项目。
安装
npm install –save-dev gulp-connect
使用
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./app/*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch(['./app/*.html'], ['html']);
});
gulp.task('default', ['connect', 'watch']);
gulp-connect的更多配置,例如指定port、多个目录、https等等,请参考https://www.npmjs.com/package/gulp-connect
gulp-useref
gulp-useref用于自动合并html页面中的css、js等依赖。
安装
npm install –save-dev gulp-useref
使用
首先,需要在html中标明需要合并的css、js。例如:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
对应的css、js目录为:
css/
- one.css
- two.css
scripts/- one.js
:two.js
编写gulpfile.js脚本,创建useref任务
var gulp = require('gulp'),
useref = require('gulp-useref');
gulp.task('useref', function () {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
执行useref任务后,生成的html为:
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
生成的css、js目录为:
css/
- combined.css
scripts/- combined.js
run-sequence
run-sequence用于按序执行gulp task
安装
npm install –save-dev run-sequence
使用
gulp.task('build', function(callback) {
runSequence('build-clean',
['build-scripts', 'build-styles'],
'build-html',
callback);
});
上述代码任务执行顺序:
build-clean
build-scripts和build-styles异步执行
build-html
gulp-if
gulp-if用于条件判断。
还有一些gulp的通用组建,例如压缩css、js、图片等。
下面提供一个完整的gulpfile.js内容:
var gulp = require('gulp'),
rev = require('gulp-rev'),
gulpif = require('gulp-if'),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
connect = require('gulp-connect'),
imagemin = require('gulp-imagemin'),
cleanCSS = require('gulp-clean-css'),
runSequence = require('run-sequence'),
jsonMinify = require('gulp-json-minify'),
autoprefixer = require('gulp-autoprefixer'),
revCollector = require('gulp-rev-collector');
gulp.task('connect', function () {
// 创建本地server,端口为8080
connect.server({
root:'./src',
port: 8080,
livereload: true
});
//监听文件修改,实时刷新
gulp.watch(['src/**/*'], ['reload']);
});
gulp.task('reload',function () {
// 刷新
gulp.src('src/**/*')
.pipe(connect.reload());
});
gulp.task('imgDev', function () {
//拷贝、压缩图片
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dev/img'));
});
gulp.task('userefDev', function(){
//合并html中引用的js、css(标记的),并将合并后的文件存储到dev目录下
return gulp.src('src/html/*.html')
.pipe(useref())
.pipe(gulpif('*.css', autoprefixer()))
.pipe(gulp.dest('dev/html'));
});
gulp.task('copyData', function () {
//拷贝data数据
return gulp.src(['src/data/*'])
.pipe(gulp.dest('dev/data'));
});
gulp.task('copyLib', function () {
//拷贝第三方库,即将html中useref没有处理的js文件拷贝
gulp.src('src/js/photoswipe/*')
.pipe(gulp.dest('dev/js/photoswipe'));
});
gulp.task('revDev', function () {
// 为所有文件(除html)生成版本号,并将版本文件映射关系写入dev/rev-manifest.json
return gulp.src(['dev/**/*', '!dev/html/*'])
.pipe(rev())
.pipe(gulp.dest('dev'))
.pipe(rev.manifest())
.pipe(gulp.dest('dev'));
});
gulp.task('revCollector', function () {
// 根据dev/rev-manifest.json控制html文件中资源的版本
return gulp.src(['dev/rev-manifest.json', 'dev/**/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dev'));
});
gulp.task('miniDev', function(){
return gulp.src(['dev/**/*', '!dev/rev-manifest.json'])
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', autoprefixer()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(gulpif('*.png', imagemin()))
.pipe(gulpif('*.svg', imagemin()))
.pipe(gulpif('*.gif', imagemin()))
.pipe(gulpif('*.jpg', imagemin()))
.pipe(gulpif('*.json', jsonMinify()))
.pipe(gulp.dest('dev/'));
});
gulp.task('miniDist', function(){
// 压缩dev目录下的js、css、
return gulp.src(['dev/**/*', '!dev/rev-manifest.json'])
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', autoprefixer()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(gulpif('*.png', imagemin()))
.pipe(gulpif('*.svg', imagemin()))
.pipe(gulpif('*.gif', imagemin()))
.pipe(gulpif('*.jpg', imagemin()))
.pipe(gulpif('*.json', jsonMinify()))
.pipe(gulp.dest('dist/'));
});
gulp.task('dev', function(done){
//
runSequence(
['userefDev', 'imgDev','copyData', 'copyLib'],
['revDev'],
['revCollector'],
done);
});
gulp.task('dist', function(done) {
//依次运行dev、miniDist任务
runSequence(
['dev'],
['miniDist'],
done);
});