GULP/WEPACKワークフローのノード環境を設定する

Question

NODE.envを使用して天気を判断しようとしています。webpackでJSを小さくしたいかどうかは、手動でenvを設定するとうまくいきますが、それを私のデフォルトおよびビルドタスクに統合することもできます。何とかそれは動作しません。

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

私はそれを行う方法を考え出し：

私は実行シーケンスを追加してtを実行しなければならなかった特定の順序で尋ねると、次の行を追加します。

package.json：

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

Gulpfile：

が安全な実際の環境に変数を設定する（便利なだけにあればタスクでアプリケーションを実行します特定の環境が設定されている）。

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' 
    ); 
}); 

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

タスクは、環境を設定します