0

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

到目前为止，我有一个文件可以处理我的文件并监视更改并重新加载浏览器。我的问题是-目前我将文件通过管道传输到 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
);
4

1 回答 1

0

首先，您需要安装 gulp 实用插件npm i --save-dev gulp-util来访问环境变量。这样当你运行时gulp --env=production，你可以在你的 gulp.js 文件中访问这个“env”的东西。然后需要 gulp-utilconst 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 插件。

于 2019-10-18T17:17:11.693 回答