gulp+webpack

2019-package.json

{
  "name": "xxx-frontend-html",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp",
    "build": "gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "autoprefixer": "^9.6.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "browser-sync": "^2.26.7",
    "gulp": "^3",
    "gulp-babel": "^8.0.0",
    "gulp-bro": "^1.0.3",
    "gulp-clean-css": "^4.2.0",
    "gulp-cli": "^2.2.0",
    "gulp-file-include": "^2.1.0",
    "gulp-font-spider": "^0.3.6",
    "gulp-if": "^3.0.0",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-rev": "^9.0.0",
    "gulp-rev-replace": "^0.4.4",
    "gulp-rimraf": "^1.0.0",
    "gulp-terser": "^1.2.0",
    "jquery": "^3.4.1",
    "rimraf": "^3.0.0"
  },
  "browserslist": [
    "cover 99.9% in CN"
  ],
  "dependencies": {
    "@babel/runtime": "^7.6.0",
    "core-js": "^3.2.1"
  }
}

gulp+webpack.js

var gulp = require('gulp');
var webpack = require('webpack');

var rimraf = require('gulp-rimraf');

var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var yargs = require('yargs');
var gulpif = require('gulp-if');

var argv = yargs.argv;
// 生产环境标识, gulp build -p 开始生产构建
var production = !!argv.p || false;

gulp.task('default',['watch','webpack','less'], function () {
  // Serve files from the root of this project
  browserSync.init({
    server: {
      baseDir: "./src"
    }
  });
});

gulp.task('clean', function () {
  rm.sync('./dist');
  return gulp.src(['src/**/*.bundle.js*','src/**/*.css','!src/css/style.css'], { read: false }) // much faster
    .pipe(rimraf());
});


gulp.task('build',['clean','webpack','min_js','less','min_css','png','rev'], function () {
  rm.sync(rev_json);
  return gulp.src(['src/**/*.bundle.js'/*,'src/!**!/!*.css','!src/css/style.css'*/], { read: false }) // much faster
    .pipe(rimraf());
});


gulp.task('webpack', function (callback) {
  webpack(require('./webpack.config'),function (error,stats) {
    if (error){
      process.stdout.write(String(error));
      callback;
      return;
    }
    process.stdout.write(String(stats));
    callback();
  });

});



var gulp         = require('gulp'),
    path         = require('path'),
    less         = require('gulp-less'),
    rename       = require('gulp-rename'),
    minify_css   = require('gulp-minify-css'),  
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    uglify       = require('gulp-uglify'),
    rm           = require('rimraf'),
    rev          = require('gulp-rev'),
    replace      = require("gulp-rev-replace");


var rev_json = 'dist/rev-min2hash.json';

//压缩js文件
gulp.task('min_js',['webpack'], function() {
  return gulp.src(['src/js/*.bundle.js','src/js/config/global.js', 'src/js/single/*.js'],{base:'src'})
    .pipe(gulpif(production, uglify({mangle:{except:['jquery','$','import','module','exports','kankan','K','KK','EventEmitter']}, compress: {drop_console: true}})))
    .pipe(gulpif(!production, uglify({mangle:{except:['jquery','$','import','module','exports','kankan','K','KK','EventEmitter']}})))
    .pipe(rename(function(path) {
      path.basename += ".min";
    }))
    //.pipe(gulp.dest('dist/js/'))
    .pipe(rev())
    .pipe(gulp.dest('./dist'))  // write rev'd assets to build dir
    .pipe(rev.manifest(rev_json,{base:process.cwd()+'/dist',merge:true}))
    .pipe(gulp.dest('./dist'));
});

//less转css
gulp.task('less',['clean'], function () {
  return gulp.src('src/css/**/*.less')
    .pipe(less({
      paths: [ __dirname,'.','./src/css']
    }))
    .pipe(postcss([ autoprefixer({ browsers: ['last 6 versions'] }) ]))
    .pipe(gulp.dest('src/css'));
});

gulp.task('less:dev', function () {
  return gulp.src('src/css/**/*.less')
    .pipe(less({
      paths: [ __dirname,'.','./src/css']
    }))
    .pipe(postcss([ autoprefixer({ browsers: ['last 6 versions'] }) ]))
    .pipe(gulp.dest('src/css'));
});

//压缩css文件
gulp.task('min_css',['less','min_js'], function() {
  return gulp.src(['src/css/**/*.css'/*,'!src/css/style.css'*/],{base:'src'})    //block comment for designer's css and added "css/style.css": "css/style.min.css" to src2min.json
    .pipe(minify_css({compatibility: 'ie7'}))
    .pipe(rename(function(path) {
      path.basename += ".min";
    }))
    //.pipe(gulp.dest('dist/css'))
    .pipe(rev())
    .pipe(gulp.dest('./dist'))  // write rev'd assets to build dir
    .pipe(rev.manifest(rev_json,{base:process.cwd()+'/dist',merge:true}))
    .pipe(gulp.dest('./dist'));
});

//TODO 压缩图片
gulp.task('png', function() {
  return gulp.src(['src/**/*.+(png|jpg|swf|ico)'],{base:'src'})
    .pipe(gulp.dest('dist/'));
});

//HTML 对应资源改名
gulp.task('rev',['min_css','min_js'], function() {

  var manifest1    = gulp.src("./src/rev-src2min.json");
  var manifest2    = gulp.src(rev_json);
  var manifestProd = null;
  var flag = false;

  if (production) {
    manifestProd = gulp.src("./src/prod-src2min.json");
    flag = true;
  }

  return gulp.src(['src/**/*.html'])
    .pipe(gulpif(flag, replace({manifest:manifestProd})))
    .pipe(replace({manifest:manifest1}))
    .pipe(replace({manifest:manifest2}))
    .pipe(gulp.dest('dist/'));
});



//自动监控文件变化 less自动在src下转css js自动转换为.bundle.js
gulp.task('watch', function() {
  //gulp.watch('src/css/**/*.less', ['less']).on('change',reload);
  gulp.watch('src/css/**/*.less', ['less:dev']);
  gulp.watch(['src/css/**/*.css','src/**/*.html']).on('change',reload);
  gulp.watch(['src/**/*.js','!src/**/*.bundle.js'], ['webpack']);
  gulp.watch('src/**/*.bundle.js').on('change',reload);
});


var sftp = require('gulp-sftp');

gulp.task('upload',['build'], function () {
  return gulp.src('dist/**/*')
    .pipe(sftp({
      host: '10.11.10.40',
      user: 'root',
      pass: 'xunlei',
      remotePath:'/data/vhost/kankan.com/kkzhibo'
    }));
});

gulp-babel-browserify-2019.js

var browserSync = require('browser-sync').create();

var gulp = require('gulp'),
  path = require('path'),
  less = require('gulp-less'),
  postcss = require('gulp-postcss'),
  minify_css = require('gulp-clean-css'),
  rename = require('gulp-rename'),
  uglify = require('gulp-terser'),
  autoprefixer = require('autoprefixer'),
  rm = require('rimraf'),
  gulpif = require('gulp-if');
var rimraf = require('gulp-rimraf');
var fontSpider = require('gulp-font-spider');
var fileinclude = require('gulp-file-include');

var babel = require('gulp-babel');
var bro = require('gulp-bro');
// var babelify     = require('babelify');

var mode = 'dev'; // 'dist'
var outputPath = 'dev'; // 'dist'
// var rev_json = () => `${outputPath}/rev.json`;

// Static Server + watching scss/html files
gulp.task('serve', [
  'clean',
  'less',
  'html',
  'js',
  'images',
  'font',
  // 'fontspiderDev'
], function () {

  browserSync.init({
    server: `./${outputPath}`
  });

  gulp.watch(["src/css/**/*.less", "src/pages/**/*.html", "src/html-parts/**/*.html"], ['less', 'html']);
  gulp.watch(["src/js/**/*.js"], ['js']);
  gulp.watch([`${outputPath}/**/*.*`]).on('change', browserSync.reload);
});

gulp.task('clean', function () {
  rm.sync('./${outputPath}');
  return gulp.src([`${outputPath}/**/*.css`, 'src/**/*.css', '!src/css/index.css'], { read: false }) // much faster
    .pipe(rimraf());
});

//less转css
gulp.task('less', [], function () {
  return gulp.src('src/css/final.less')
    .pipe(less({
      paths: [__dirname, '.', './src/css']
    }))
    .on('error', handleError)
    .pipe(postcss([autoprefixer()]))
    .pipe(gulpif(outputPath === 'dist', minify_css({ compatibility: 'ie8' })))
    .pipe(gulp.dest(`./${outputPath}/css`));
});

gulp.task('html', function () {
  return gulp.src('src/pages/**/*.html')
    .pipe(fileinclude({
      prefix: '@@',
      basepath: 'src/html-parts'
    }))
    .pipe(gulp.dest(`./${outputPath}`));
});

gulp.task('js', function () {
  return gulp.src('src/js/**/*.js')
    .pipe(gulp.dest(`./${outputPath}/js`));
});
gulp.task('js:prod', function () {
  return gulp.src(['src/js/**/*.js','!src/js/**/jquery*.js'])
    .pipe(babel({
      presets: [
        ['@babel/preset-env', {
          useBuiltIns: 'usage',
          corejs: 3
        }]
      ],
      plugins: ['@babel/transform-runtime']
    }))
    // .pipe(bro())
    // .pipe(uglify({mangle:{reserved:['jquery','$','jQuery','import','module','exports','EventEmitter', 'require']}, compress: {drop_console: true}}))
    .pipe(gulp.dest(`./${outputPath}/js`));
});
gulp.task('js:prod:2', ['js:prod', 'thirdpartyjs'], function () {
  return gulp.src([`./${outputPath}/js/**/*.js`])
    .pipe(bro())
    .pipe(uglify({ mangle: { reserved: ['jquery', '$', 'jQuery', 'import', 'module', 'exports', 'EventEmitter', 'require'] }, compress: { drop_console: true } }))
    .pipe(gulp.dest(`./${outputPath}/js`));
});
gulp.task('images', function () {
  return gulp.src('src/images/**/*.*')
    .pipe(gulp.dest(`./${outputPath}/images`));
});
gulp.task('thirdpartyjs', function () {
  return gulp.src('src/js/**/jquery*.js')
    .pipe(gulp.dest(`./${outputPath}/js`));
});
gulp.task('font', function () {
  return gulp.src('src/css/font/*.*')
    .pipe(gulp.dest(`./${outputPath}/font`));
});
gulp.task('fontspiderDev', function () {
  return gulp.src('dev/*.html')
    .pipe(fontSpider());
});
gulp.task('fontspiderProd', function () {
  return gulp.src('dist/*.html')
    .pipe(fontSpider());
});

gulp.task('default', ['serve']);

gulp.task('changepath', function () {
  outputPath = 'dist';
  mode = 'dist';
});

gulp.task('build', [
  'changepath',
  'clean',
  'less',
  'html',
  'js:prod:2',
  'images',
  'font',
  // 'fontspiderProd'
], function () {

});


function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}