一些有用的 gulp 模板

Introduction

正如阮一峰所说,前端变化太快了。

前年还在用Grunt, 去年就用了Gulp,而今年都在用Webpack,明年或许都用Brunch了。

我之前一直在用Grunt,后来追Gulp了。后来就实在是不想追了。就老老实实用gulp

Normal

正常的项目大概会需要以下的一些内容

那么就先安装依赖:

$ npm install 6to5ify gulp gulp-autoprefixer gulp-babel gulp-browserify2 gulp-concat gulp-minify-css gulp-notify gulp-sass gulp-sourcemaps gulp-uglify gulp-hash --save-dev

这一块定义一个我适用的基本的模板。

分别有sassjs任务。

可以编译sassES6的语法到正常浏览器能解析的样子。

运行production则生成生产环境下的文件在productions目录

/**
* 引入依赖
*/

var gulp = require('gulp'),
babel = require('gulp-babel'),
sass = require('gulp-sass'),
browserify = require('gulp-browserify2'),
uglify = require('gulp-uglify'),
minifycss = require('gulp-minify-css'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
hash = require('gulp-hash'),
concat = require('gulp-concat');
/**
* sass 任务
* 引入源文件,转义并加入浏览器兼容代码,然后加入sourcemap,输出,最后提醒成功。
* @return {file} 转义完成的css文件
*/

gulp.task('sass', function() {
return gulp.src('src/style/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/style/'))
.pipe(notify({ message: 'normal css file was successfully build!'}));
});

/**
* 生产环境的sass文件转义
* 添加了压缩任务。以及hash值的附加
* @return {file} 转义压缩完成的css文件
*/

gulp.task('production-sass', function() {
return gulp.src('src/style/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifycss())
.pipe(sourcemaps.write('.'))
.pipe(hash())
.pipe(gulp.dest('production/style/'))
.pipe(hash.manifest('asset-hashes.json'))
.pipe(gulp.dest('production/style/'))
.pipe(notify({ message: 'production css file was successfully build!'}));
});

/**
* 转义文件,从ES6转义到ES5
* @return {file} 转义完成的文件
*/

gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(browserify({
fileName: 'bundle.js',
transform: require('6to5ify'),
options: {
debug: false
}
})
)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js/'))
.pipe(notify({ message: 'normal js file was successfully build!'}));
});

/**
* 生产环境的js文件
* 不多BB了
* @return {file} 转义完成的文件
*/

gulp.task('production-js', function() {
return gulp.src('src/js/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(browserify({
fileName: 'bundle.js',
transform: require('6to5ify'),
options: {
debug: false
}
})
)
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(hash())
.pipe(gulp.dest('production/js/'))
.pipe(hash.manifest('asset-hashes.json'))
.pipe(gulp.dest('production/js/'))
.pipe(notify({ message: 'production js file was successfully build!'}));
});

/**
* 默认任务
* 执行sass和js任务
* @return {file} sass和js最后的文件
*/

gulp.task('default', function() {
gulp.start('sass', 'js');
});

/**
* 监视任务
* 监视文件的变化并运行相应的程序
* @return {file} 按下F5刷新浏览器就可以了
*/

gulp.task('watch', function() {
gulp.watch('src/style/*.scss', ['sass']);
gulp.watch('src/js/*.js', ['js']);
});

/**
* 生产环境文件打包~
* @return {file} 在production文件夹下
*/

gulp.task('production', function() {
gulp.start('production-sass', 'production-js');
});

React

现在React这么火,我当然也是会写一些React项目的。

首先是安装依赖

注意:这里没有写其他的部分。需要css部分的,参考上面的部分

npm install --save-dev gulp browserify vinyl-source-stream babelify

然后是任务编写:

/**
* 引入gulp依赖神马的
* @type {object}
*/

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");

/**
* jsx 任务,用于转义jsx => javascript
* @return {[file]} 转义完成的js文件。引入即可
*/

gulp.task('jsx', function(){
return browserify('./js/app.js')
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('js'));
});