为GULP / WEPACK工作流设置节点环境

Question

我正在尝试使用NODE.env来确定我是否想要缩小我的JS与webpack，当我手动设置js中的环境时，它确实有效，但我认为我也可以将其集成到我的默认和构建任务中。不知何故，它不起作用。

package.json

.
.
.
      "scripts": {
        "dev": "gulp",
        "build": "gulp build"
      }

Gulpfile.js：

'use strict';

const gulp = require('gulp'),
  // cleanCSS = require('gulp-clean-css'),
  webpack = require('webpack-stream'),
  pkg = require('./package.json'),
  $ = require('gulp-load-plugins')({
    pattern: ['*'],
    scope: ['devDependencies']
  }),
  onError = (err) => {
    $.notify.onError({
      title: 'Gulp',
      subtitle: 'Failure!',
      message: '\n' + '\n' + 'Error: <%= error.message %>',
      sound: 'Frog'
    })(err);
  };

/**
  * Static Server + watching scss/html files
  */
gulp.task('serve', ['scss', 'webpack'], () => {

  $.browserSync.init({
    server: pkg.paths.src.base
  });

  gulp.watch(pkg.paths.src.scss + pkg.vars.scssPattern, ['scss']);
  gulp.watch(pkg.paths.src.js + pkg.vars.jsPattern, ['webpack']);
  gulp.watch('src/*.html').on('change', $.browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('scss', () => {
  return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
    .pipe($.newer(pkg.paths.src.assets + pkg.vars.siteCssName))
    .pipe($.plumber({ errorHandler: onError }))
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync())
    .pipe($.sourcemaps.write())
    .pipe($.autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe($.rename({suffix: '.min'}))
    .pipe(gulp.dest(pkg.paths.src.assets))
    .pipe($.notify({
      title: 'Gulp',
      subtitle: 'Success!',
      message: 'Scss task completed!',
      sound: 'Pop'
    }))
    .pipe($.browserSync.stream());
});

// concat translate and minify js
gulp.task('webpack', () => {
  return gulp.src(pkg.paths.src.js + pkg.vars.jsName)
  .pipe($.newer(pkg.paths.src.assets + pkg.vars.siteJsName))
  .pipe($.plumber({ errorHandler: onError }))
  .pipe(webpack(require('./webpack.config.js')))
  .pipe(gulp.dest(pkg.paths.src.assets))
  .pipe($.browserSync.stream());
});

gulp.task('default', ['serve'], () => {
  return process.env.NODE_ENV === 'dev';
});

gulp.task('build', ['serve'], () => {
  return process.env.NODE_ENV === 'prod';
});

webpack.config.js：

const webpack = require('webpack'),
  pkg = require('./package.json'),
  debug = process.env.NODE_ENV !== 'prod';

module.exports = {
  context: __dirname,
  devtool: debug ? 'inline-sourcemap' : null,
  entry: pkg.paths.src.js + pkg.vars.jsName,
  output: {
    path: __dirname + pkg.paths.src.assets,
    filename: pkg.vars.siteJsName
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
  ]
};

Answer 1

我想出了怎么做：

我必须添加run-sequence来以特定的顺序运行任务，并添加以下内容：

package.json：

"scripts": {
    "dev": "gulp develop",
    "build": "gulp deploy"
  }

Gulpfile：

设置变量以保护实际环境(如果设置了特定环境，则仅适用于在任务中执行应用程序)。

var config = {
  env: process.env.NODE_ENV
};

设置环境的任务：

gulp.task('set-dev-node-env', function () {
   return process.env.NODE_ENV = config.env = 'dev'; //  eslint-disable-line
});
gulp.task('set-prod-node-env', function () {
   return process.env.NODE_ENV = config.env = 'prod'; //  eslint-disable-line
});

实际任务：

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

gulp.task('develop', ['set-dev-node-env'], function () {
  return $.runSequence(
      'default'
   );
});

gulp.task('deploy', ['set-prod-node-env'], function () {
  return $.runSequence(
      'default'
   );
});