gulp 学习——es6+sass+rev
gulp 环境搭建
git地址: https://github.com/Ez-Z/gulp
1. 安装gulp
cnpm i -g gulp //安装全局gulp2.gulp Api 学习
var gulp = requrie('gulp'); //引入gulp
gulp.task('taskName',['task1', 'task2', ...],function(){
gulp.src('fileSrc',[,opts]) //gulp.src文件路径可为路径字符串的数组，opts(可选)
.pipe(fn()) //执行
.pipe(gulp.dest('destSrc',[,opts]))//gulp.dest文件写入路径，opts(可选)
});/*
gulp.task 有三个参数：
1.任务名称；(必填)
2.按顺序异步执行任务数组；（可选）
3.任务执行函数，等数组内任务执行完后再执行;（必填）
*/
gulp.task('watch',function(){
gulp.watch(['fileSrc1',...],[,opts],['task1',...],function(evt){
})
/*
gulp.watch 有四个参数：
1.需要监听的文件；（必填）
2.opts；（可选）
3.tasks；（可选，3. 4.必须填一个）
4.cb(evt)；(可选)
*/
})3.npm 初始化和依赖包安装
cnpm init
cnpm i --save-dev gulp
//一些依赖包和版本号如下
"babel-preset-es2015": "^6.24.1",//babel标准es2015
"babel-preset-stage-0": "^6.24.1",//es7以及以上
"browserify": "^14.4.0", //打包工具
"babelify": "^7.3.0", //用于打包时用
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2", //babel
"gulp-clean": "^0.3.2", //用于清理文件
"gulp-concat": "^2.6.1", //合并文件
"gulp-cssnano": "^2.1.2", //压缩css
"gulp-livereload": "^3.8.1", //自动刷新页面
"gulp-rename": "^1.2.2", //重命名
"gulp-sass": "^3.1.0", //sass
"gulp-uglify": "^3.0.0", //压缩丑化js
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
cnpm i --save
//版本控制依赖
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.2.2",4.配置gulpfile
const gulp = require('gulp');
const babel = require('gulp-babel');
const babelify = require('babelify');
const uglify = require('gulp-uglify');
const buffer = require('vinyl-buffer');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify'); //打包
const source = require('vinyl-source-stream'); //
const sass = require('gulp-sass'); //sass 依赖
const livereload = require('gulp-livereload'); //文件改变刷新页面
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
const clean = require('gulp-clean');
//清除文件
gulp.task('clean', function(){
return gulp.src(['dist/js/','dist/css/','dist/*.html','dist/rev'])
.pipe(clean());
});
// 编译并压缩js rev
gulp.task('convertJS', function(){
gulp.src(['app/js/**/*.js'])
.pipe(babel({
presets: ['es2015','stage-0']
}))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'))
});
// 合并并压缩css rev
gulp.task('convertCSS', function(){
gulp.src(['app/css/*.css','app/css/*.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(concat('app.css'))
.pipe(cssnano())
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'));
});
gulp.task('testRev',function() {
return gulp.src(['dist/rev/**/*.json','app/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist'));
});
// 打包
// gulp.task("build", function () {
// var b = browserify({
// entries: "app/js/app.js"
// });
// return b.transform(babelify, { //此处babel的各配置项格式与.babelrc文件相同
// presets: [
// 'es2015', //转换es6代码
// 'stage-0', //指定转换es7代码的语法提案阶段
// ]
// })
// .bundle()
// .pipe(source("app.js"))
// .pipe(buffer())
// .pipe(sourcemaps.init())
// .pipe(uglify())
// .pipe(sourcemaps.write('./maps'))
// .pipe(gulp.dest("dist/js"));
// });
// 监视文件变化，自动执行任务
gulp.task('watch', function(){
gulp.watch(['app/css/*.css','app/css/*.scss'], ['convertCSS']);
gulp.watch(['app/js/*.js'], ['convertJS'];
});
gulp.task('min', ['convertCSS', 'convertJS']);
// 执行 gulp clean
// gulp min
// gulp testRev问题：gulp异步执行和执行顺序需要思考
5.文件目录结构
//执行前
├── app
│ ├── app.html
│ ├── css
│ │ ├── app.css
│ │ └── style.scss
│ ├── index.html
│ └── js
│ ├── app.js
│ ├── bbb.js
│ └── ccc.js
├── dist
│ ├── css
│ └── js
├── gulpfile.js
└── package.json
//执行后
├── app
│ ├── app.html
│ ├── css
│ │ ├── app.css
│ │ └── style.scss
│ ├── index.html
│ └── js
│ ├── app.js
│ ├── bbb.js
│ └── ccc.js
├── dist
│ ├── app.html
│ ├── css
│ │ └── app-186b633846.css
│ ├── index.html
│ ├── js
│ │ ├── app-63eba027ee.js
│ │ ├── bbb-d070049c74.js
│ │ └── ccc-903a18ed22.js
│ └── rev
│ ├── css
│ │ └── rev-manifest.json
│ └── js
│ └── rev-manifest.json
├── gulpfile.js
└── package.json
