简体   繁体   English

如何自动运行所有 gulp 任务?

[英]How can I automatically run all gulp tasks?

I come to you for help.我来找你帮忙。 I am using the gulp and browser-sync to automate my tasks: compiling sass, restarting the development server on every change, and checking the changes in the browser.我正在使用 gulp 和 browser-sync 来自动化我的任务:编译 sass,在每次更改时重新启动开发服务器,并检查浏览器中的更改。 I just want to make it faster.我只是想让它更快。 The problem is when I run gulp (I also use gulp-nodemon) it just runs nodemon but browser-sync doesn't run and the other tasks don't run either.问题是当我运行 gulp(我也使用 gulp-nodemon)时,它只运行 nodemon 但浏览器同步不运行,其他任务也不运行。 If I run each task separately, they work, but all together by default with gulp, they don't work.如果我单独运行每个任务,它们会工作,但默认情况下,gulp 一起运行,它们不起作用。 If you want to help me, I will always appreciate it.如果你愿意帮助我,我将永远感激。

This is my code这是我的代码

    const gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    nodemon = require('gulp-nodemon'),
    watch = require('gulp-watch');

gulp.task('scss', () => {

    let stream = gulp
        .src('./src/scss/*/*.scss')
        .pipe(sass({outputStyle: 'expanded',}))
        .pipe(autoprefixer({ versions: 'last 2 browsers', }))
        .pipe(gulp.dest('./src/public/css'))
        .pipe(browserSync.stream());

    return stream;
});

gulp.task('nodemon', cb => {
    let started = false;

    return nodemon({
        script: './src/index.js',
        ext: 'ejs js',
        ignore: ['gulpfile.js'],
    }).on('start', () => {
        if (!started) {
            cb();
            started = true;
        }
    });
});

gulp.task('browser-sync', gulp.series('nodemon'), () => {
    browserSync.init({
        proxy: 'http://localhost:3000',
        open: false,
        files: ['public/**/*.js'],
        browser: 'google chrome',
        port: 3000,
    });
});

gulp.task('default', gulp.series('browser-sync'), () => {
    gulp.watch('./src/views/*/*.ejs').on('change', browserSync.reload());
    gulp.watch('./src/public/*/*.js').on('change', browserSync.reload());
    gulp.watch('./src/public/css/*/*.css').on('change', browserSync.stream());
    gulp.watch('./src/scss/*/*.scss', gulp.series('scss'));
});

This has three arguments:这有三个论据:

gulp.task('browser-sync', gulp.series('nodemon'), () => {

in gulp v4+ you can only have two arguments, so change that to在 gulp v4+ 中,您只能有两个参数,因此将其更改为

gulp.task('browser-sync', gulp.series('nodemon', () => {

and same with和一样

gulp.task('default', gulp.series('browser-sync', () => {

  • there will be a close paren ) to add to the ends of those functions too, like }));也会有一个关闭括号)来添加到这些函数的末尾,例如}));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM