it-swarm.com.ru

Как минимизировать ES6, используя Gulp

Я относительно новичок в написании gulpfile.js вручную. У меня есть проект на основе Backbone и Marionette, где файл gulp до сих пор выглядел следующим образом:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var _ = require('lodash');

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

gulp.task('clean', function(cb) {
  return del([
    'app/tmp'
  ], cb);
});

gulp.task('html', function() {
  return gulp.src('./src/index.html')
    .pipe($.plumber())
    .pipe(gulp.dest('./dist'));
});

gulp.task('images', function() {
  gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
    './src/assets/images/*.png'
  ])
  .pipe(gulp.dest('./dist/images'));
});

gulp.task('vendor-css', function() {
  gulp.src(['./src/assets/styles/vendor/*.css'
  ])
  .pipe(gulp.dest('./dist'));
});

gulp.task('fonts', function() {
  gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg'
  ])
  .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('styles', function() {
  return gulp.src('./src/main.styl')
    .pipe($.stylus())
    .pipe($.autoprefixer())
    .pipe($.rename('bundle.css'))
    .pipe(gulp.dest('./dist'))
    .pipe(reload({ stream: true }));
});

var bundler = _.memoize(function(watch) {
  var options = {debug: true};

  if (watch) {
    _.extend(options, watchify.args);
  }

  var b = browserify('./src/main.js', options);

  if (watch) {
    b = watchify(b);
  }

  return b;
});

var handleErrors = function() {
  var args = Array.prototype.slice.call(arguments);
  delete args[0].stream;
  $.util.log.apply(null, args);
  this.emit('end');
};

function bundle(cb, watch) {
  return bundler(watch).bundle()
    .on('error', handleErrors)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe($.sourcemaps.init({ loadMaps: true }))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('./dist'))
    .on('end', cb)
    .pipe(reload({ stream: true }));
}

gulp.task('scripts', function(cb) {
  bundle(cb, true);
});

gulp.task('jshint', function() {
  return gulp.src(['./src/**/*.js', './test/**/*.js'])
    .pipe($.plumber())
    .pipe($.jshint())
    .pipe($.jshint.reporter(stylish));
});

var reporter = 'spec';

gulp.task('mocha', ['jshint'], function() {
  return gulp.src([
    './test/setup/node.js',
    './test/setup/helpers.js',
    './test/unit/**/*.js'
  ], { read: false })
    .pipe($.plumber())
    .pipe($.mocha({ reporter: reporter }));
});

gulp.task('build', [
  'clean',
  'html',
  'images',
  'vendor-css',
  'fonts',
  'styles',
  'scripts',
  'test'
]);

gulp.task('test', [
  'jshint'
]);

gulp.task('watch', ['build'], function() {
  browserSync.init({
    server: {
      baseDir: 'dist'
    }
  });

  reporter = 'dot';
  bundler(true).on('update', function() {
    gulp.start('scripts');
    gulp.start('test');
  });
  gulp.watch('./test/**/*.js', ['test']);
  gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
  gulp.watch(['./src/*.html'], ['html']);
});

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

Теперь мне нужно включить минимизацию Javascript, для которой я ссылался на следующее ссылка . Я использую тот с uglify-js-harmony как минификатор для поддержки ES6, так как большая часть моего кода использует синтаксис ES6. Измененный файл gulp выглядит следующим образом:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var uglifyjs = require('uglify-js-harmony');
var minifier = require('gulp-uglify/minifier');
var pump = require('pump');
var _ = require('lodash');

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

gulp.task('clean', function(cb) {
  return del([
    'app/tmp'
  ], cb);
});

gulp.task('html', function() {
  return gulp.src('./src/index.html')
    .pipe($.plumber())
    .pipe(gulp.dest('./dist'));
});

gulp.task('images', function() {
  gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
    './src/assets/images/*.png'
  ])
  .pipe(gulp.dest('./dist/images'));
});

gulp.task('vendor-css', function() {
  gulp.src(['./src/assets/styles/vendor/*.css'
  ])
  .pipe(gulp.dest('./dist'));
});

gulp.task('fonts', function() {
  gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg'
  ])
  .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('styles', function() {
  return gulp.src('./src/main.styl')
    .pipe($.stylus())
    .pipe($.autoprefixer())
    .pipe($.rename('bundle.css'))
    .pipe(gulp.dest('./dist'))
    .pipe(reload({ stream: true }));
});

var bundler = _.memoize(function(watch) {
  var options = {debug: true};

  if (watch) {
    _.extend(options, watchify.args);
  }

  var b = browserify('./src/main.js', options);

  if (watch) {
    b = watchify(b);
  }

  return b;
});

var handleErrors = function() {
  var args = Array.prototype.slice.call(arguments);
  delete args[0].stream;
  $.util.log.apply(null, args);
  this.emit('end');
};

function bundle(cb, watch) {
  return bundler(watch).bundle()
    .on('error', handleErrors)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe($.sourcemaps.init({ loadMaps: true }))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('./dist'))
    .on('end', cb)
    .pipe(reload({ stream: true }));
}

gulp.task('scripts', function(cb) {
  bundle(cb, true);
});

gulp.task('jshint', function() {
  return gulp.src(['./src/**/*.js', './test/**/*.js'])
    .pipe($.plumber())
    .pipe($.jshint())
    .pipe($.jshint.reporter(stylish));
});

gulp.task('compress', function (cb) {
  var options = {
    preserveComments: 'license'
  };

  pump([
      gulp.src('./dist/bundle.js'),
      minifier(options, uglifyjs),
      gulp.dest('./dist')
    ],
    cb
  );
});

var reporter = 'spec';

gulp.task('mocha', ['jshint'], function() {
  return gulp.src([
    './test/setup/node.js',
    './test/setup/helpers.js',
    './test/unit/**/*.js'
  ], { read: false })
    .pipe($.plumber())
    .pipe($.mocha({ reporter: reporter }));
});

gulp.task('build', [
  'clean',
  'html',
  'images',
  'vendor-css',
  'fonts',
  'styles',
  'scripts',
  'test',
  'compress'
]);

gulp.task('test', [
  'jshint'
]);

gulp.task('watch', ['build'], function() {
  browserSync.init({
    server: {
      baseDir: 'dist'
    }
  });

  reporter = 'dot';
  bundler(true).on('update', function() {
    gulp.start('scripts');
    gulp.start('test');
  });
  gulp.watch('./test/**/*.js', ['test']);
  gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
  gulp.watch(['./src/*.html'], ['html']);
});

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

Теперь, когда я запускаю gulp, задача сжатия запускается, не выдает никакой ошибки, но никогда не завершается, и сборка (dist) выполняется так же, как и раньше (минификация не происходит!) . Нужно ли каким-то образом интегрировать эту задачу сжатия в функцию bundle, используя другой .pipe, или я здесь что-то неправильно делаю? Кроме того, правильно ли выполнять минификацию после создания bundle.js, что я и пытаюсь сделать здесь, или это необходимо сделать на этапе, когда исходные файлы еще не объединены?

7
Nikhil Khullar
  1. Клон https://github.com/terinjokes/gulp-uglify/
  2. Найдите https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L1 в предпочтительной проверке (предпочтительный последний)
  3. Установить версию для uglify-js в mishoo/UglifyJS2#harmony (ярлык для https://github.com/mishoo/UglifyJS2#harmony)

Обратите внимание, что это временная установка до официального релиза поддержки гармонии uglify.

1
avdg

Попробуйте использовать babili ES6 + minifier - https://github.com/babel/babili просто передайте babili в качестве предустановленной опции, используя babel

.pipe('*.js', babel({presets: ['babili']}))
0
deepak prakash