Question

我有一个支持Gulp 3.x的旧项目，但现在我想转换为Gulp4.x。我知道Gulp 4.x中没有重大更改，但我需要对其进行转换。

我遇到了以下问题：我想将所有libraries复制到另一个文件夹，然后从该文件夹中，我需要node_modules的BootStrap SCSS文件，但是我遇到了问题，即没有复制文件，只有文件夹复制，因此其他任务无法访问引导文件。

[14:21:46] Using gulpfile C:\xampp\htdocs\example\gulpfile.js
[14:21:46] Starting 'default'...
[14:21:46] Starting 'copy'...
[14:21:46] Finished 'copy' after 12 ms
[14:21:46] Starting 'sass'...
Error in plugin "sass"
Message:
    src\scss\base\_vendor.scss
Error: File to import not found or unreadable: ../../../dist/vendors/scss/functions.
        on line 12 of src/scss/base/_vendor.scss
        from line 2 of src/scss/style.css
>> @import "../../../dist/vendors/scss/functions";
   ^

[14:21:46] Finished 'sass' after 56 ms
[14:21:46] Starting 'css'...
[14:21:46] 'css' errored after 4.58 ms
[14:21:46] Error: File not found with singular glob: C:/xampp/htdocs/example/dist/css/style.css (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (C:\xampp\htdocs\example\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (events.js:273:13)
    at Glob.emit (events.js:182:13)
    at Glob.EventEmitter.emit (domain.js:441:20)
    at Glob._finish (C:\xampp\htdocs\example\node_modules\glob\glob.js:197:8)
    at done (C:\xampp\htdocs\example\node_modules\glob\glob.js:182:14)
    at Glob._processSimple2 (C:\xampp\htdocs\example\node_modules\glob\glob.js:688:12)
    at C:\xampp\htdocs\example\node_modules\glob\glob.js:676:10
    at Glob._stat2 (C:\xampp\htdocs\example\node_modules\glob\glob.js:772:12)
    at lstatcb_ (C:\xampp\htdocs\example\node_modules\glob\glob.js:764:12)
[14:21:46] 'default' errored after 79 ms

我的GULPFILE.JS

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const csso = require('gulp-csso');
const uglify = require('gulp-uglify');
const rename = require("gulp-rename");
const babel = require("gulp-babel");
const concat = require("gulp-concat");
const watch = require("gulp-watch");
const sourcemaps = require("gulp-sourcemaps");
const plumber = require("gulp-plumber");
livereload = require('gulp-livereload');
const sass = require("gulp-sass");
sass.compiler = require('node-sass');

const source = [
    {
        src: 'node_modules/@fortawesome/fontawesome-free/webfonts/**',
        dest: 'dist/vendors/webfonts/'
    },
    {
        src: 'node_modules/bootstrap/scss/**',
        dest: 'dist/vendors/scss/'
    },
    {
        src: 'src/assets/**',
        dest: 'dist/assets/'
    }
];

const FileSource = [
    {
        src: [
            'node_modules/bootstrap/dist/css/bootstrap.min.css',
            'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
        ],
        concat: 'plugin.css',
        dest: 'dist/vendors/css/'
    },
    {
        src: [
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/popper.js/dist/umd/popper.min.js',
            'node_modules/bootstrap/dist/js/bootstrap.min.js'
        ],
        concat: 'plugin.js',
        dest: 'dist/vendors/js/'
    }
];

// COPY ALL FILES FROM SRC TO DIST
gulp.task('copy', done => {
    source.map(function(file) {
        gulp.src(file.src)
            .pipe(gulp.dest(file.dest));
    });
    FileSource.map(function(file) {
        gulp.src(file.src)
            .pipe(concat(file.concat))
            .pipe(gulp.dest(file.dest));
    });
    done();
});

// TASK OF HTML
gulp.task('html', function() {
    gulp.src('./*.html').pipe(livereload());
});

// CONVERT DIST CSS TO MIN, liveReload IS HERE BCZ IN HTML LINK IS .min AND loadMaps: true is doing load maps of scss files
gulp.task('css', function () {
    return gulp.src('dist/css/style.css')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(csso())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(livereload());
});

// CONVERT SASS TO CSS AND MOVE TO DIST
gulp.task('sass', function () {
    return gulp.src('src/scss/main.scss')
        .pipe(plumber())
        .pipe(rename('style.css'))
        .pipe(sourcemaps.init())
        .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/css/'));
});

// CONVERT DIST JS TO MIN, liveReload IS HERE BCZ IN HTML LINK IS .min
gulp.task('js', function () {
    return gulp.src('dist/js/main.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload());
});

// CONVERT ALL JS FILES TO ONE MAIN JS FILE AND MOVE TO DIST
gulp.task('concatJs', function () {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(plumber())
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('watch', function () {
    livereload.listen();
    watch('./*.html', gulp.series('html'));
    watch('src/scss/**/*.scss', gulp.series('sass', 'css'));
    watch('src/js/**/*.js', gulp.series('concatJs', 'js'));
});

gulp.task('serve', gulp.series(['sass', 'css', 'concatJs', 'js', 'watch'], function(done) {
    done();
}));

gulp.task('default', gulp.series('copy', ['sass', 'css', 'concatJs', 'js'], function(done) {
    done();
}));

我认为gulp.series或gulp.parallel上有错误，但不知道如何解决。

仅当您写入gulp copy并在过程完成之后写入gulp时才有效，但是我需要，当我写入gulp时，两个任务都按顺序运行，而没有{{1} }

其他问题与我的问题有关，但不适用于我的情况或使用gulp 3.x。

How to run a gulp task from another task?

Run code after gulp task done with all files

Run gulp task after completion of other task

Answer 1

我使用npm解决了这个问题，我使用了npm-run-all插件按顺序运行脚本。

"start": "npm-run-all -s --silent gulp-copy gulp",
"gulp": "gulp",
"gulp-copy": "gulp copy",

在Gulp 4.x中完成一个任务后如何运行另一个任务

1 个答案: