gulp 學習——es6+sass+rev

gulp 環境搭建

git地址: https://github.com/Ez-Z/gulp

1. 安裝gulp

cnpm i -g gulp //安裝全局gulp

2.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