Question

我正在尝试为gulp v4修改v3 gulpfile.js，同时也在此过程中对其进行更新和现代化。如何修改文件以设置以下项目？

目标

观看WP PHP主题文件
优化图像以获取高分辨率照片的最佳做法。将svgs合并到svg-defs中，并添加任何标志/参数以对其进行清理或使其更易于使用。
生产任务，清理目录，整理所有文件，构建并导出为项目根目录中的zip
将gulp文件拆分为逻辑部分以进行维护
皮棉，缩小，Gzip，优化所有代码
添加有关成功进行js / scss编译的通知。错误失败，在终端中清除格式化的错误消息。
打包，压缩，导出所有主题文件功能

注意：我在gulpfile中评论了一些问题和目标

我已经尽力了，但是我不明白。如何修改此配置文件（gulp 4.0）以包括上述内容。

// Optimized for WordPress builds


const { src, dest, task, watch, series, parallel } = require('gulp');

// Plugins
var autoprefixer = require('autoprefixer'),
    cssnano = require('cssnano'), // do I have best minification settings configured? How to add gzip?
    //mqpacker = require('css-mqpacker'), how to setup with current config?
    //postcss = require('gulp-postcss'), how to setup with current config?
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'), 

    browserSync = require('browser-sync').create(),
    //del = require('del'), Would like to delete and clean files before builds
    eslint = require('gulp-eslint'), // How to properly configure?
    babelify     = require( 'babelify' ),
    browserify   = require( 'browserify' ),
    source       = require( 'vinyl-source-stream' ),
    buffer       = require( 'vinyl-buffer' ),
    stripDebug = require( 'gulp-strip-debug' ),

    util = require('gulp-util'),
    image = require('gulp-image'), // How to setup with current config and determine best practices for compression settings?
    notify = require('gulp-notify'), // Notify on code change to CSS, JS, Build
    path = require('path'), // Export build to root dir
    plumber = require('gulp-plumber'), // Check for errors. Fail on js/scss error, clean error messages
    rename = require('gulp-rename'), // rename build files to main.min.js and main.min.css
    options      = require( 'gulp-options' ),
    gulpif = require( 'gulp-if' );



    // Webpack seems cool. What should I be taking advantage of with it? Can I eliminate anything above with it?
    //webpack = require('webpack'),
    //webpackconfig = require("./webpack.config.js"),
    //webpackstream = require("webpack-stream");


// Paths - IMPORTANT: Update projectURL every project
var projectURL = 'project.local',

    //scss
    styleSRC     = 'assets/scss/main.scss',
    styleURL     = 'assets/css/',
    mapURL       = '.',

    //js
    jsSRC        = 'assets/js',
    jsFront      = 'main.js',
    jsFiles      = [ jsFront ],
    jsURL        = 'assets/js/build',

    //img
    imgSRC       = 'assets/images/src**/*',
    imgURL       = 'assets/images/',

    //fonts
    fontsSRC     = 'assets/src/fonts/**/*',
    fontsURL     = 'assets/fonts/',

    //php
    phpSRC      = '.', //is this correct?
    phpURL      = '.', //is this correct?

    //watch
    styleWatch   = 'assets/scss/**/*.scss',
    jsWatch      = 'assets/js/**/*.js',
    imgWatch     = 'assets/images/**/*.*',
    fontsWatch   = 'assets/fonts/**/*.*',
    phpWatch     = '.**/*.php';

// Tasks
// Load from project root but also append a proxy for easy acess
function browser_sync() {
    browserSync.init({
        proxy: projectURL,
        open: true,
        injectChanges: true,
        server: {
            baseDir: '.',
        }
    });
}

function reload(done) {
    browserSync.reload();
    done();
}

function css(done) {
    src( [ styleSRC ] )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({ browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ] }) )
        .pipe( rename( { suffix: '.min' } ) )
        //.pipe( postcss( plugins ) ) does this conflict with sass plugin?
        .pipe( sourcemaps.write( mapURL ) )
        .pipe( dest( styleURL ) )
        .pipe( browserSync.stream() );
    done();
    util.log(util.colors.yellow('website styles compiled and minified'));
};

function js(done) {
    jsFiles.map( function( entry ) {
        return browserify({
            entries: [jsSRC + entry]
        })
        .transform( babelify, { presets: [ '@babel/preset-env' ] } )
        .bundle()
        .pipe( source( entry ) )
        .pipe( rename( {
            extname: '.min.js'
        } ) )
        .pipe( buffer() )
        .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
        .pipe( sourcemaps.init({ loadMaps: true }) )
        .pipe( uglify() )
        .pipe( sourcemaps.write( '.' ) )
        .pipe( dest( jsURL ) )
        .pipe( browserSync.stream() );
    });
    done();
};

// Need to check and verify all parameters here also need to add this ask a task
// Link: https://libraries.io/npm/gulp-image
function images(done) {
    .pipe(image({
        pnquant: true,
        optipng: false,
        zopflipng: true,
        jpegRecompress: false,
        mozjpeg: true,
        guetzli: false,
        gifsicle: true,
        svgo: true,
        concurrent: 10,
        quiet: true //defaults to false
    }))
        .pipe(dest(imgURL));
    done();
};

function triggerPlumber( src_file, dest_file ) {
    return src( src_file )
        .pipe( plumber() )
        .pipe( dest( dest_file ) );
}

function images() {
    return triggerPlumber( imgSRC, imgURL );
};

function fonts() {
    return triggerPlumber( fontsSRC, fontsURL );
};

function html() {
    return triggerPlumber( htmlSRC, htmlURL );
};

function php() {
    return triggerPlumber(phpSRC, phpURL);
}

function watch_files() {
    watch(styleWatch, series(css, reload));
    watch(jsWatch, series(js, reload));
    watch(imgWatch, series(images, reload));
    watch(fontsWatch, series(fonts, reload));
    watch(phpWatch, series(php, reload));
    src(jsURL + 'main.min.js')
        .pipe( notify({ message: 'Gulp is watching, happy coding!' }) );
}

task("css", css);
task("js", js);
task("images", images);
task("fonts", fonts);
task("php"), php);
task("default", parallel(css, js, images, fonts, php));
task("watch", parallel(browser_sync, watch_files));````

针对WordPress优化的设置gulpfile.js（gulp 4.0）

0 个答案: