gulp构建

package.json

{ "name": "ecma", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "babel-preset-es2015": "^6.22.0", "babelify": "^7.3.0", "browserify": "^14.1.0", "del": "^2.2.2", "event-stream": "^3.3.4", "glob": "^7.1.1", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-babel": "^6.1.2", "gulp-browserify": "^0.5.1", "gulp-cache": "^0.4.6", "gulp-clean": "^0.3.2", "gulp-clean-css": "^3.0.3", "gulp-concat": "^2.6.1", "gulp-imagemin": "^3.1.1", "gulp-jshint": "^2.0.4", "gulp-livereload": "^3.8.1", "gulp-minify-html": "^1.0.6", "gulp-notify": "^3.0.0", "gulp-rename": "^1.2.2", "gulp-rev": "^7.1.2", "gulp-ruby-sass": "^2.1.1", "gulp-sourcemaps": "^2.4.1", "gulp-uglify": "^2.0.1", "gulp-usemin": "^0.3.28", "gulp-util": "^3.0.8", "imagemin-pngquant": "^5.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.9.0" } }

gulpfile.js

/** * 工作流程 * @type {*} */ var gulp = require("gulp"); var del = require("del");// 清除文件 var uglify = require("gulp-uglify");//js 压缩 var sourcemaps = require("gulp-sourcemaps");//处理Js生成Javascript var babel = require('gulp-babel');//对js es6代码编译 var browserify = require('browserify');//js模块合并 var babelify = require('babelify');//对js es6代码编译 用在browserif里 var minifyCss = require('gulp-clean-css');//压缩css var imagemin = require('gulp-imagemin');//压缩图片 var pngquant = require('imagemin-pngquant');//深度压缩国片 var usemin = require('gulp-usemin');//拷贝文件 var rev = require('gulp-rev'); var rename = require("gulp-rename");//更改名称 var buffer = require('vinyl-buffer'); var source = require('vinyl-source-stream');//使用指定的文件名创建了一个 vinyl 文件对象实例 var es = require('event-stream');//将 buffer 变为 stream (内存中的内容) var glob = require('glob'); var gutil = require('gulp-util'); var watchify = require('watchify'); var paths = { scripts: ["lib/*.js", "!lib/config.js", "!lib/*.min.js"], style: ["style/*"], images: ["images/*"], html: ["html/*.html", "*.html"] }; // var secret = require('./secret.json'); // var pkg = require('./package.json'); //清除文件 gulp.task("clean-dist", function () { del(["dist"]); }); //js压缩 编译 gulp.task("minifly-js", function () { gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(babel({//对js es6代码编译 presets: ['es2015'] })) .pipe(uglify().on("error", function (e) {//文件压缩，如果有错误，返回错误信息 console.log(e); })) .pipe(gulp.dest("dist/lib")); }); //压缩css gulp.task("minifly-css", function () { gulp.src(paths.style) .pipe(minifyCss()) .pipe(gulp.dest("dist/style")) }); //压缩图片 gulp.task("imagemin-img", function () { gulp.src(paths.images) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest("dist/images")) }); //合并 js 拷贝Html gulp.task("usemin-html", function () { gulp.src(paths.html) .pipe(usemin({//对里面的文件进行一些处理，如js js: [babel({ presets: ["es215"] }), uglify().on("error", function (e) { console.log(e) }), rev()] })) .pipe(gulp.dest('dist/html')); gulp.src("lib/*.min.js") .pipe(gulp.dest("dist")) }); //更改config 测试名 gulp.task("copy-test", function () { gulp.src("config/config_test.js") .pipe(rename({//修改js名称 basename: "config" })) .pipe(babel({//编译js presets: ["es2015"] })) .pipe(uglify().on("error", function (e) { console.log(e); })) .pipe(gulp.dest("dist/lib")) }); //更改config 正试pro gulp.task("copy-pro", function () { gulp.src("config/config_pro.js") .pipe(rename({//修改js名称 basename: "config" })) .pipe(babel({//编译js presets: ["es2015"] })) .pipe(uglify().on("error", function (e) { console.log(e); })) .pipe(gulp.dest("dist/lib")) }); //Browserify 合并app js gulp.task('browserify', function (done) { glob('./app/main-**.js', function (err, files) { if (err) done(err); var tasks = files.map(function (entry) { return browserify({entries: [entry]}) .transform(babelify.configure({//使用babel转换es6代码 presets: ["es2015"] })) .bundle()//合并打包 .pipe(source(entry))//将常规流转换为包含Stream的vinyl对象，并且重命名 .pipe(buffer()) .pipe(rename(function (path) { path.dirname = "/";// dirname 目录文件地址 path.basename += "-bundle";//basename 重命名 })) .pipe(sourcemaps.init({loadMaps: true})) .pipe(uglify().on("error", function (e) { console.log(e) })) .pipe(sourcemaps.write('./'))//生成map文件 .pipe(gulp.dest('./dist/lib')); }); es.merge(tasks).on('end', done); }) }); //完整流程 gulp.task("build-dev", ["clean-dist", "minifly-js", "minifly-css", "imagemin-img", "usemin-html", "copy-test", "browserify"]); gulp.task("build-pro", ["clean-dist", "minifly-js", "minifly-css", "imagemin-img", "usemin-html", "copy-pro", "browserify"]); //手机发部到生产和测试环境 // gulp.task('publish-env', ['build-env'], function () { // return gulp.src('dist/**') // .pipe(sftp({ // host: secret.test.host, // user: secret.test.username, // pass: secret.test.password, // remotePath: secret.test.path + pkg.name // })) // .pipe(gutil.noop()); // }); // // gulp.task('publish-pro', ['build-pro'], function () { // return gulp.src('dist/**') // .pipe(sftp({ // host: secret.product.host, // user: secret.product.username, // pass: secret.product.password, // remotePath: secret.product.path + pkg.name // })) // .pipe(gutil.noop()); // }); // //开发中使用 gulp.task('watch', function (done) { glob('./app/main-**.js', function (err, files) { if (err) done(err); var tasks = files.map(function (entry) { var b = browserify({entries: [entry]}) .transform(babelify.configure({ presets: ["es2015"] })) .plugin(watchify); var bundle = function () { var start = Date.now(); return b.bundle() .pipe(source(entry)) // rename them to have "bundle as postfix" .pipe(buffer()) .pipe(rename(function (path) { path.dirname = "/"; path.basename += "-bundle"; })) .pipe(sourcemaps.init({loadMaps: true})) .pipe(uglify().on("error", function (e) { console.log(e) })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./lib')) .on('error', function (err) { gutil.log(gutil.colors.red(err.toString())); }) .on('end', function () { gutil.log(gutil.colors.green('Finished rebundling in', (Date.now() - start) + 'ms.')); }) }; b.on('update', bundle); return bundle(); }); es.merge(tasks).on('end', done); }) });