Глоток 3 к Глотку 4: Как посмотреть scss и минимизировать / скомпилировать его в css? - PullRequest
Новая
       98

Глоток 3 к Глотку 4: Как посмотреть scss и минимизировать / скомпилировать его в css?

0 голосов
/ 24 декабря 2018

В Gulp 3 использование следующего кода поместит scss в css, когда будут обнаружены изменения.Он будет создавать новые минимизированные файлы из старых файлов .scss и помещать их в папку css. 

//=======gulpfile.js=======
//dependencies
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var minifyCCS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var changed     = require('gulp-changed');

//Roots
var SCSS_SRC    = './public/scss/*.scss';
var SCSS_DEST   = './public/css';

//Compiling
gulp.task('compile_scss', function(){
    return gulp.src(SCSS_SRC)
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
});

//Detect changes in SCSS
gulp.task('watch_scss', function(){
    gulp.watch(SCSS_SRC, ['compile_scss']);
});

//Run
gulp.task('default', ['watch_scss']);

Однако Gulp 4 полностью меняет обработку функций, и я пока не нашел достойного примера того, как простосмотреть scss и поместить его в уменьшенный css.Я читал о gulp.series и gulp.parallel, но не думаю, что что-то из этого - то, что я ищу.Приведенный выше код, используемый в Gulp 3, больше не работает в Gulp 4. Вместо запуска gulp watch_css, cmd выдает мне такую ​​ошибку:

assert.js: 350 throw err;^

AssertionError [ERR_ASSERTION]: Функция задания должна быть указана в Gulp.set [as_setTask] (D: \ say-my-name-RG \ saymyname \ node_modules \ предпринять \ lib \ set-task.js: 10: 3) в Gulp.task (D: \ say-my-name-RG \ saymyname \ node_modules \ предпринять \ lib \ task.js: 13: 8) в Object.(D: \ say-my-name-RG \ saymyname \ gulpfile.js: 29: 6) в Module._compile (внутренний / modules / cjs / loader.js: 689: 30) в Object.Module._extensions..js(внутренний / modules / cjs / loader.js: 700: 10) в Module.load (внутренний / modules / cjs / loader.js: 599: 32) в tryModuleLoad (внутренний / modules / cjs / loader.js: 538: 12) в Function.Module._load (внутренняя / modules / cjs / loader.js: 530: 3) в Module.require (внутренняя / modules / cjs / loader.js: 637: 17) по требованию (внутренняя / modules / cjs /helpers.js: 22: 18)

Это все на сервере локального узла, использующее реагирование.Я пытался найти функцию gulp.set, но я не нашел ничего подобного.Кто-то сказал, что вернуться к Gulp 3 было бы самым простым вариантом, но я бы хотел использовать новейшее возможное программное обеспечение.

Также работает gulp compile_scss в cmd, поэтому без gulp.watch выдает мне то же самоеошибка, как показано выше.

1 Ответ

0 голосов
/ 24 декабря 2018

Вам необходимо использовать gulp.series: 

//Detect changes in SCSS
gulp.task('watch_scss', function(){
    gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});

//Run
gulp.task('default', gulp.series('watch_scss'));

, и у вас есть опечатка в строке: 

var minifyCCS   = require('gulp-clean-css');

изменить на: 

var minifyCSS   = require('gulp-clean-css');

Переход на gulp4 является хорошим справочным материалом.

...