Изменить gulpfile.js (gulp 4.0) - PullRequest
Новая
       42

Изменить gulpfile.js (gulp 4.0)

0 голосов
/ 02 января 2019

Это старый файл конфигурации.

Текущая версия глотка 4.0
Как изменить этот файл конфигурации через gulp.series () , gulp.parallel () ?

Я вижу все переведенные учебники, не очень понимаю.
Как изменить этот файл конфигурации (gulp 4.0> gulp watch, gulp.series, gulp.parallel)?

Спасибо 

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoPrefixer = require("gulp-autoprefixer"),
    minifyCss = require("gulp-clean-css"),
    rename = require("gulp-rename"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    plumber = require("gulp-plumber"),
    util = require("gulp-util"),
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload;
var srcs = {
    "html": ["./**/*.html"],
    "css": ["./assets/css/**/*.css"],
    "sass": ["./assets/sass/**/*.scss"],
    "js": ["./assets/js/*.js"],
};

gulp.task("default", ["browser-sync"]);

gulp.task("sass", function (done) {
    return gulp.src("./assets/sass/sys.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoPrefixer({
            browsers: ["> 5%", "last 2 versions", "not ie <=8"],
            cascade: true,
            remove: true
        }))
        .pipe(rename({
            basename: "sys"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }))
        .pipe(minifyCss())
        .pipe(rename({
            suffix: ".m"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }));
    util.log(util.colors.yellow("website styles compied and minified"));
});

gulp.task("js", function (done) {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

gulp.task("browser-sync", ["sass", "js"], function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);
    gulp.watch(srcs.sass, ["sass"]);
    gulp.watch(srcs.js, ["js"]);
});

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Начиная с Gulp 4, нет необходимости регистрировать задачи с помощью метода task (). Gulp API по-прежнему будет поддерживать этот подход, но использование экспорта теперь является основным подходом для регистрации задач. (см .: https://gulpjs.com/docs/en/getting-started/creating-tasks)

Наряду с этим новым подходом все потоковые методы (src, dest, series, parallel, watch) могут быть определены с помощью функции назначения деструктурирования ES6 как: 

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

Кроме того, отличная особенность Gulp 4 в отношении последовательностей и параллелей - это неограниченное вложение, поэтому, используя этот подход, вы можете избежать дублирования задач. (см .: https://gulpjs.com/docs/en/api/series и https://gulpjs.com/docs/en/api/parallel)

Таким образом, ваш gulpfile.js, модифицированный в соответствии с функциями Gulp 4, будет выглядеть так: 

const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment

    var sass = require("gulp-sass"),
        autoPrefixer = require("gulp-autoprefixer"),
        minifyCss = require("gulp-clean-css"),
        rename = require("gulp-rename"),
        concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
        uglify = require("gulp-uglify"),//you don't use this anywhere.  Avoid importing objects to reduce memory buffer overload
        plumber = require("gulp-plumber"),
        util = require("gulp-util"),
        browserSync = require("browser-sync").create(),
        reload = browserSync.reload;

    var srcs = { 
        html: ["./**/*.html"],
        css: ["./assets/css/**/*.css"],
        sass: ["./assets/sass/**/*.scss"],
        js: ["./assets/js/*.js"],
    };



    function sass() {
        return src("./assets/sass/sys.scss")
            .pipe(plumber())
            .pipe(sass())
            .pipe(autoPrefixer({
                browsers: ["> 5%", "last 2 versions", "not ie <=8"],
                cascade: true,
                remove: true
            }))
            .pipe(rename({
                basename: "sys"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }))
            .pipe(minifyCss())
            .pipe(rename({
                suffix: ".m"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }));
        util.log(util.colors.yellow("website styles compied and minified"));
    }

    function js(){
        return src("./assets/js/sys.js")
            .pipe(reload({
                stream: true
            })); //not sure if you intentionally did not put dest() stream method
    }

    function browser_sync(cb) {
        browserSync.init({
            server: {
                baseDir: "./"
            },
            browser: ["google chrome"]
        });
        const watcher = watch(srcs.html);

        watcher.on('change',  reload);

        watcher.on("change", reload);
        watch(srcs.sass, series(sass));
        watch(srcs.js,  series(js));
        cb();
    }

    //this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
    exports.default = series(parallel(sass, js), browser_sync);
0 голосов
/ 02 января 2019 
     // don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {        
    // all your stuff unchanged here
});

    // don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

// gulp.task('taskName', only one other parameter with the function call part of gulp.series

gulp.task("browser-sync", gulp.series("sass", "js", function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);

    // don't need gulp.series below if only calling a single task
    // but if you wanted it:  gulp.watch(srcs.sass, gulp.series("sass"));
    // It does seem that sometimes the gulp.series is needed even though the docs 
    //     specifically say you don't when calling only a single task

    gulp.watch(srcs.sass, "sass");
    gulp.watch(srcs.js, "js");
}));

 // move below to the bottom, if using gulp.task cannot call a task before it has been registered, 
 //   i.e., gulp.task("browser-sync"........

 gulp.task("default", "browser-sync");

См. Статью о хорошем переходе на gulp4 .

Существует множество других преимуществ gulp4, если вы полностью измените свои задачи на функции, упомянутые в статье или в документации gulpJS,экспорт и т. д. Но то, что описано выше, поможет вам работать с кодом gulp4.

...