Question

我有一个很长的编译时间，我试图搞清楚。
编译必须适用于SASS和javascript es6文件以及把手模板。

我的网络应用程序有两个部分。第一个是 nodeJs服务器，另一个是使用 nodeJS服务器的 Web应用程序。

有关如何帮助我的任何想法？

树：

/index.js
/package.json
/gulpfile.babel.json
/public/
       src/
           script/*
           styles/*
           template/*

/dist

的package.json

{
  "name": "****",
  "version": "0.0.0",
  "description": *****",
  "main": "index.js",
  "author": "****",
  "private": true,
  "dependencies": {
    "colors": "^1.1.2",
    "express": "4.13.4",
    "google-auth-library": "^0.10.0",
    "googleapis": "^20.1.0",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^7.0.0",
    "handlebars": "^4.0.10",
    "mongodb": "^2.2.15",
    "nodemailer": "^4.0.1",
    "nodemailer-mailgun-transport": "^1.3.5",
    "socket.io": "^1.7.1",
    "underscore": "^1.8.3",
    "uuid": "^3.0.1"
  },
  "scripts": {
    "start": "node index.js"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.22.1",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-register": "^6.22.0",
    "backbone": "^1.3.3",
    "backbone-associate": "0.0.13",
    "backbone.localstorage": "^1.1.16",
    "backbone.marionette": "^3.2.0",
    "browser-sync": "^2.18.13",
    "gsap": "^1.19.1",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-declare": "^0.3.0",
    "gulp-define-module": "^0.1.5",
    "gulp-file": "^0.3.0",
    "gulp-filter": "^5.0.0",
    "gulp-handlebars": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.1",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-uglify": "^2.0.1",
    "gulp-wrap": "^0.13.0",
    "handlebars": "^4.0.10",
    "jquery": "^3.1.1",
    "merge-stream": "^1.0.1",
    "rollup": "^0.41.4",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-json": "^2.1.0",
    "rollup-plugin-node-builtins": "^2.0.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "run-sequence": "^1.2.2"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

gulfile.babel.js：

import gulp from 'gulp';
import sass from 'gulp-ruby-sass';
import { rollup } from 'rollup';
import json from 'rollup-plugin-json';
import plumber from 'gulp-plumber';
import file from 'gulp-file';
import filter from 'gulp-filter';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import runSequence from 'run-sequence';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import handlebars from 'gulp-handlebars';
import wrap from 'gulp-wrap';
import declare from 'gulp-declare';
import merge from 'merge-stream';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import defineModule from 'gulp-define-module';
import browserSync from 'browser-sync';


import {name} from './package.json';
const srcPath = 'public/src/';

function bundle(opts) { // very long ...  (12s) 
  return rollup({
    entry: srcPath + "scripts/" + name + '.js',
    plugins: [
      json(),
      builtins(),
      nodeResolve(),
  	  commonjs(),
      babel({
        // sourceMaps: true,
        presets: [['es2015', {modules: false}]],
        babelrc: false
      })
    ]
  }).then(bundle => {
    return _generate(bundle);
  }).then(gen => {
    gen.code += '\n//# sourceMappingURL=' + gen.map.toUrl();
    return gen;
  });
}

function _generate(bundle) { // long too (4s)
  return bundle.generate({
    format: 'iife',
    moduleName: 'ATalks',
    sourceMap: true
  });
}

function compileScripts(buildPath) {
  return bundle().then(gen => {
    return file(name + '.js', gen.code, {src: true})
      .pipe(plumber())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(buildPath))
      .pipe(filter(['**', '!**/*.js.map']))
      .pipe(rename(name + '.min.js'))
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(buildPath));
  });
}

function compileScriptsLight(buildPath) {
  return bundle().then(gen => {
    return file(name + '.js', gen.code, {src: true})
      .pipe(plumber())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(buildPath))
  });
}

gulp.task('sass', function () {
  return sass(srcPath+'styles/all.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('public/dist/styles'))
    .pipe(plumber())
    .pipe(browserSync.stream());
});

gulp.task('scripts', function(done) {
  return compileScripts('public/dist/');
});

gulp.task('scriptsLight', function(done) {
  return compileScriptsLight('public/dist/');
});

gulp.task('templates', function(done){
  gulp.src(['public/src/templates/*.hbs'])
    .pipe(handlebars({
      handlebars: require('handlebars')
    }))
    .pipe(defineModule('es6', {
	  require: {
		  Handlebars: "handlebars/runtime"
	  }
    }))
    .pipe(gulp.dest('public/src/templates'));

    runSequence('scripts', done);
});

gulp.task('move', function() {
	gulp.src([srcPath+"*.html", srcPath+"images/**", srcPath+"fonts/**"], {base: srcPath }).pipe(gulp.dest("public/dist/"));
});

gulp.task('default', function() {
  browserSync.init(null, {
      proxy: "http://localhost:3000",
      files: ["public/dist/**/*.*"],
      port: 7000
  });
	gulp.watch(srcPath+'/**/*.js',['scriptsLight']);
	gulp.watch(srcPath+'/**/*.hbs',['templates']);
	gulp.watch(srcPath+'/**/*.scss',['sass']);
  gulp.watch(srcPath+'*.html',['move']);
  gulp.watch(srcPath+'/images/**',['move']);
  gulp.watch(srcPath+'/fonts/**',['move']);
});

gulp.task('build', ['templates', 'scripts', 'sass', 'move']);

.babelrc：

{
  "presets": ["es2015"]
}

编译需要超过15秒|| Babel - Gulpfile - es6 - 汇总捆绑器

0 个答案: