gulp + browserify ES6环境搭建 gulp 环境安装
1 2 cnpm install gulp -g cnpm i gulp -g
1 2 cnpm init cnpm init -y (后面加上-y 可以跳过配置，后续可以在编辑器里修改文件)
发现多了一个package.json,类似下面的内容
1 2 3 4 5 6 7 8 9 10 11 12 { "name": "gulp-new", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
1 2 3 cnpm install --save-dev gulp gulp-less gulp-minify-css gulp-uglify gulp-rename gulp-connect gulp-concat cnpm i -D gulp
/src
index.html
/less
/js
board.less
board.js
根目录下新建gulpfile.js文件
书写gulp task
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 var gulp = require ('gulp' );var less = require ('gulp-less' );var minifycss = require ('gulp-minify-css' );var concat = require ('gulp-concat' );var rename = require ('gulp-rename' );var connect = require ('gulp-connect' );gulp.task ('less2css' , function ( return gulp.src ('src/less/*.less' ) .pipe (less ()) .pipe (gulp.dest ('src/css' )) }); gulp.task ('css' , function ( return gulp.src ('src/css/*.css' ) .pipe (concat ('main.css' )) .pipe (gulp.dest ('dest/css' )) .pipe (rename ({ suffix : '.min' })) .pipe (minifycss ()) .pipe (gulp.dest ('dest/css' )) .pipe (connect.reload ()); }) gulp.task ('watch' , function ( gulp.watch ('src/less/*.less' , ['less2css' , 'css' ]); }); gulp.task ('webserver' , function ( connect.server ({ livereload : true , port : 8000 }); }) gulp.task ('default' , ['less2css' , 'css' , 'watch' , 'webserver' ]);
命令行gulp 跑一下default任务，在./src/dest/css 下会生成main.css ,main.min.css文件。
这一部分的问题：
1、任务是并行的，导致编译less之前，main.css已经压缩完
解决办法
1、通过插件 gulp-sequence 整理运行顺序
2、官方做法
https://www.gulpjs.com.cn/docs/api/
对于这个例子，让我们先假定你有两个 task，”one” 和 “two”，并且你希望它们按照这个顺序执行：
1、在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。
2、在 “two” 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var gulp = require ('gulp' );gulp.task ('one' , function (cb ) { cb (err); }); gulp.task ('two' , ['one' ], function ( }); gulp.task ('default' , ['one' , 'two' ]);
browserify 打包es6环境
1 cnpm install --save-dev vinyl-source-stream vinyl-buffer browserify gulp-connect gulp-concat babelify babel-preset-es2015
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "devDependencies" : { ... } , "babel" : { "presets" : [ "es2015" ] } , "browserify" : { "transform" : [ [ "babelify" , { "presets" : [ "es2015" ] } ] ] }
改写gulpfile.babel.js, 可以写es6语法了,js 被编译到 ./dest/js/app.js ./dest/js/app.min.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 import gulp from 'gulp' ;import uglify from 'gulp-uglify' ;import less from 'gulp-less' ;import minifycss from 'gulp-minify-css' ;import concat from 'gulp-concat' ;import rename from 'gulp-rename' ;import browserify from 'browserify' ;import source from 'vinyl-source-stream' ; import buffer from 'vinyl-buffer' ; import connect from 'gulp-connect' ;gulp.task ('convertJS' , function ( return browserify ({ entries : ['src/js/board.js' ] }) .bundle () .pipe (source ('app.js' )) .pipe (buffer ()) .pipe (gulp.dest ('dest/js' )) .pipe (uglify ()) .pipe (rename ({ suffix : '.min' })) .pipe (gulp.dest ('dest/js' )) .pipe (connect.reload ()); }); gulp.task ('less2css' , function ( return gulp.src ('src/less/*.less' ) .pipe (less ()) .pipe (gulp.dest ('src/css' )) }); gulp.task ('css' , function ( return gulp.src ('src/css/*.css' ) .pipe (concat ('main.css' )) .pipe (gulp.dest ('dest/css' )) .pipe (rename ({ suffix : '.min' })) .pipe (minifycss ()) .pipe (gulp.dest ('dest/css' )) .pipe (connect.reload ()); }) gulp.task ('watch' , function ( gulp.watch ('src/js/*.js' , ['convertJS' ]); gulp.watch ('src/less/*.less' , ['less2css' , 'css' ]); }); gulp.task ('webserver' , function ( connect.server ({ livereload : true , port : 8000 }); }) gulp.task ('default' , ['convertJS' , 'less2css' , 'css' , 'watch' , 'webserver' ]);
注意点 1、gulp.src(globs[, options])
glob 匹配模式
