"stylesheet" href="/css/all-ef5462562d.css">
7、其他插件
【connect】生成一个服务器
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server();
});
【babel】将ES6代码编译成ES5
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6', function(){
return gulp.src('src/js/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist/js'));
});
配置
在实际开发中，并不会直接使用原生java script进行开发，使用库或框架开发会更高效，以requiejs和jquery的配置为例。项目目录结构如下
【img】
将'src/img'中的普通图片压缩保存到'dist/img'中，将'src/img/sprite'中的图片制作雪碧图
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var spritesmith = require('gulp.spritesmith');
gulp.task('img', function () {
//压缩图片
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
//制作雪碧图
gulp.src('src/img/sprite/*')
.pipe(spritesmith({
'imgName':'sprite.png',
'cssName':'sprite.css',
'padding':5
}))
.pipe(gulp.dest('src/css/temp'));
gulp.src('src/css/temp/sprite.png')
.pipe(gulp.dest('dist/img'));
});
gulp.task('default',['img']);
【css】
css部分由sass编译成对应的css存储在'src/css'中，然后，对css文件进行检测、合并、自动添加前缀、压缩后，存储在'dist/css'中
var gulp = require('gulp');
var concat = require('gulp-concat');
var csslint = require('gulp-csslint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleancss = require('gulp-clean-css');
var concat = require('gulp-concat');
gulp.task('css', function() {
gulp.src('src/css/sass/*.scss')
//将sass编译为css代码
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/temp'));
return gulp.src('src/css/temp/*.css')
//设置css检测规则，并检测css代码
.pipe(csslint('.csslintrc'))
//对代码进行报错提示
.pipe(csslint.formatter())
//合并文件
.pipe(concat('style.css'))
//根据设置浏览器版本自动处理浏览器前缀
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0']
}))
//压缩css文件
.pipe(cleancss({compatibility: 'ie8'}))
//输出到目标目录
.pipe(gulp.dest('dist/css'));
});
gulp.task('default',['css']);
【js】
js部分由gulp-requirejs打包为'main.js'之后，进行压缩，最后存储在'dist/js'中，所依赖的框架requirejs和jquery不打包，直接存储在'dist/js'中
var gulp = require('gulp');
var requirejs = require('gulp-requirejs');
var uglify = require('gulp-uglify');
gulp.task('js', function() {
//将js模块打包成一个文件
return requirejs({
baseUrl: 'src/js',
paths:{
'jquery':'../../dist/js/jquery'
},
out:'main.js',
name: 'main',
exclude: ['jquery']
})
//压缩文件
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('default',['js']);
【版本号】
为文件设置版本号
<!-- build:css dist/css/style.css -->
<link rel="stylesheet" href="dist/css/style.css">
<!-- endbuild -->
var gulp = require('gulp');
var rev = require('gulp-rev');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
gulp.task('file', function() {
gulp.src('*.html')
.pipe(useref())
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(''));
});
gulp.task('default',['file']);
<link rel="stylesheet" href="dist/css/style-0f788265cc.css">
