Question

我最近决定将一些非常古老的gulp文件更新为gulp4。由于工作流程完全不同，因此我从零开始，因此我想要一个定制的解决方案以适应我现在的工作方式。

到目前为止，我有一个文件，该文件将处理我的文件并观察更改并重新加载浏览器。我的问题是-目前我将文件传输到tmp文件夹进行开发，但是当我准备生产生产文件时，是否有一种巧妙的方法将此逻辑合并到我现有的功能中，或者更好地专门制作新功能处理最终的构建过程？

我主要问这个问题是因为我可以创建一些buildStylesProd函数，但是在一个函数中是否有更整洁的DRY方法来处理所有这些问题？

当前进度：

// 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插件。

Gulp 4开发和生产方法

1 个答案: