Gulp 4开发和生产方法

Question

我最近决定将一些非常旧的gulp文件更新到GUGP4。我几乎是从头开始的，因为我的工作流程完全不同，因此我想要一个定制的解决方案来适应我现在的工作方式。

到目前为止，我有一个文件，它将处理我的文件，并监视更改和重新加载浏览器。我的问题是-目前我通过管道将文件传输到tmp文件夹进行开发，但是当我准备好生成我的生产文件时，有没有一种巧妙的方法可以将这种逻辑整合到我现有的函数中，或者更好的方法是创建专门用于处理最终构建过程的新函数？

我之所以问这个问题，主要是因为我可以编写一些buildStylesProd函数，但是有没有一种更简洁、更干练的方法来在一个函数中处理所有这些问题呢？

当前进度：

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, lastRun, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const del = require('del');
const browserSync = require('browser-sync').create();
var replace = require('gulp-replace');

var settings = {
    reload: true,
    styles: true,
    scripts: true,
    clean: true
};

// File paths
const files = { 
    input: 'src/',
    tmp: 'tmp/',
    scssPath: 'src/scss/**/*.scss',
    jsPath: 'src/js/**/*.js',
    cssTmp: 'tmp/css',
    jsTmp: 'tmp/js',
    htmlPath: 'perch/templates/**/*.html',
    pageFiles: 'perch/templates/**/*.php',
}

// Watch for changes to the tmp directory
var startServer = function (done) {

    // Make sure this feature is activated before running
    if (!settings.reload) return done();

    // Initialize BrowserSync
    browserSync.init({
        injectChanges: true,
    });

    // Signal completion
    done();

};

// Reload the browser when files change
var reloadBrowser = function (done) {
    if (!settings.reload) return done();
    browserSync.reload();
    done();
};

function buildStyles(done){    
    // Make sure this feature is activated before running
    if (!settings.styles) return done();

    return src(files.scssPath)
            .pipe(sourcemaps.init()) // initialize sourcemaps first
            .pipe(sass()) // compile SCSS to CSS
            .on("error", sass.logError)
            .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
            .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
            .pipe(dest(files.cssTmp)
    ); // put final CSS in dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function buildScripts(done){
    // Make sure this feature is activated before running
    if (!settings.scripts) return done();

    return src([
            files.jsPath
            //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
            ])
            //.pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(dest(files.jsTmp)
    );
}

// Remove pre-existing content from output folders
var cleanTmp = function (done) {

    // Make sure this feature is activated before running
    if (!settings.clean) return done();

    // Clean the dist folder
    del.sync([
        files.tmp
    ]);

    // Signal completion
    return done();
};

// Watch for changes
var watchSource = function (done) {
    watch([files.input, files.pageFiles], series(exports.default, reloadBrowser));
    done();
};

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
    cleanTmp,
    parallel(
        buildStyles, 
        buildScripts
        )
);

// Watch and reload
// gulp watch
exports.watch = series(
    exports.default,
    startServer,
    watchSource
);

Answer 1

首先，您需要安装gulp实用程序插件npm i --save-dev gulp-util来访问环境变量。这样当您运行gulp --env=production时，就可以在gulp.js文件中访问这个"env“内容。然后需要gulp util const gutil = require('gulp-util');

然后将此函数添加到您的gulp文件中：

function uglifyIfNeeded() {
  return gutil.env.env === 'production'
    ? uglify()
    : gutil.noop();
}

然后，您将能够在构建定义中使用此函数，如下所示：

function buildScripts(done){
  if (!settings.scripts) return done();

  return src([
        files.jsPath            
        ])
        .pipe(concat('all.js'))

        //NOTE THIS LINE
        .pipe(uglifyIfNeeded())

        .pipe(dest(files.jsTmp)
   );
}

当然，您不必创建uglifyIfNeeded()函数。您可以在管道中使用环境函数，如下所示：

function buildScripts(done){
  if (!settings.scripts) return done();

  return src([
        files.jsPath            
        ])
        .pipe(concat('all.js'))

        //NOTE THIS LINE
        .pipe(gutil.env.env === 'prod' ? uglify() : gutil.noop())

        .pipe(dest(files.jsTmp)
   );
}

不过，要确保你有uglify插件。