Gulp 4 - Gulpfile.js настроен

Я нахожу документацию по Gulp 4 чрезвычайно трудной для поиска, поэтому я подумал, что могу спросить здесь, может ли кто-нибудь помочь.

В любом случае, я довольно новичок в Gulp и без проблем использую Gulp 3, пока не попробую запустить его на виртуальной машине, которую мы используем для разработки. Мой файл gulp очень прост. Я просто использую gulp-sass для компиляции SASS в файл css, который работал нормально, но каждый раз, когда он сохраняет файл css, он изменяет права на запись в файл, и браузер не может его прочитать!

Поэтому я провел небольшое исследование, и, очевидно, это проблема с Gulp 3, которая теперь исправлена ​​в Gulp 4 - см. https://github.com/gulpjs/gulp/issues/1012. Поэтому я решил попробовать Gulp 4, поэтому я обновил его в соответствии с инструкциями здесь - http://www.ociweb.com/resources/publications/sett/gulp-4/ но у меня возникли реальные проблемы с настройкой фактического gulpfile.js. поскольку я не могу найти какую-либо документацию по нему. Это то, что я сейчас собрал, но не повезло... к сожалению, у меня нет навыков в JS!

Пример файла Gulp 4 здесь - https://gist.github.com/demisx/beef93591edc1521330a

Все, что мне нужно для gulpfile - это скомпилировать sass с помощью gulp-sass.

// include gulp
var gulp = require('gulp');

// include plugins
var sass = require('gulp-sass');


var paths = {
  dirs: {
    build: './furniture/css'
  },
  sass: './furniture/sass/**/*.scss'
};


// Shared tasks
gulp.task('glob', function () {
  var pattern = '.build/**/*.css';

  gulp.src(pattern, { read:false })
    .pipe(using());
});

// SASS

gulp.task('sass', function () {
  return gulp.src(paths.sass)
    .pipe(sass())
    .pipe(changed(paths.dirs.build))
    .pipe(gulp.dest(paths.dirs.build))
    .pipe(grep('./furniture/css', { read: false, dot: true }))
});

gulp.task('watch:styles', function () {
  gulp.watch(paths.sass, 'sass');
});

// Default task
gulp.task('default'('build', 'ws', 'watch'));
Источник

1 ответ

Ну, нам может понадобиться больше информации об ошибках, которые вы получаете. Но это здесь должно работать, если проблема только в том, что ваш gulpfile.js работает.

Если вы уже разобрались с решением, то отлично. Но для других, кто сталкивался с этим, я дам несколько советов, и тогда это должно сработать.

Индекс

  • Первое: удаление gulp 3 и установка gulp 4
    • Я собираюсь предоставить инструкции по установке и удалению, чтобы использовать gulp 4.
  • Второе: тестирование, чтобы увидеть, работает ли gulp 4
    • Я собираюсь дать вам самую простую версию, чтобы попробовать, и если это работает, то,
  • Третье: финальная версия gulpfile
    • попробуйте вторую версию, которую я предоставлю, для упомянутых вами потребностей, основываясь на файле, который вы мне показали.
  • Напоследок: некоторые заметки о Gulp 4 и текущей сборке gulp 4
    1. Основываясь на показанном вами файле gulpfile, вот несколько указателей на Gulp 4,
    2. И быстрое исправление для текущего gulp 4 build 0.4.0

Первое: удаление gulp 3 и установка gulp 4

Если вы еще не удалили исходный глоток из вашей системы, вы должны это сделать. Также вы должны удалить его как зависимость проекта, если вы добавили его.

npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp

Далее вы должны установить gulp 4 глобально и в своем проекте как зависимость.

npm install -g gulpjs/gulp-cli#4.0

в вашем проекте:

npm install --save-dev gulpjs/gulp-cli#4.0

ВАЖНЫЕ ЗАМЕТКИ

Сейчас gulpjs/gulp#4.0 (gulp вместо gulp-cli)

Второе: тестирование, чтобы увидеть, работает ли gulp 4

Базовая версия вашего gulpfile:
ПРИМЕЧАНИЕ. Измените пути gulp.src(...) и.pipe(gulp.dest(...)) при копировании и вставке.

// =========================================================
// gulpfile.js
// =========================================================
var gulp        = require('gulp'),
    sass        = require('gulp-sass');

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
    return gulp.src("path/to/sass-file.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("path/to/css-destination.css"))
});

// --------------------------------------- Default Gulp Task
gulp.task('default', function(){
    console.log("It's working!");
});

Давайте выясним, работает ли gulp 4:

  1. запустите задание по умолчанию в вашем терминале:

    gulp

    • Если ты видишь: It's working! тогда в вашем терминале вы знаете, что gulp 4 установлен правильно.
    • Если вы видите "Это работает!" но также некоторые ошибки, тогда вам нужно будет их устранить, но проблема должна быть в вашем файле gulpfile.js. (Также см. Более свежие инструкции по установке / удалению и& более свежие учебники по gulp 4, если с момента их публикации прошло некоторое время).
    • Если вы просто видите ошибки (а "Это работает!" Вообще не появляется), то вполне вероятно, что gulp 4 не был установлен должным образом, или gulp 3 не был правильно удален, и вам следует удалить как gulp 3, так и 4 и переустановить gulp 4. ПРИМЕЧАНИЕ. Это особенно вероятно, если вы пробовали множество различных инструкций по установке из разных источников.

  2. Если это сработало, то:

    • давайте создадим резервную копию ваших CSS-файлов, которые sass создал для вас ранее (если существует проект), а затем удалим эти CSS-файлы, а затем
    • Затем попробуйте запустить задачу sass в терминале:

    gulp sass

Если это сработало (создал эти файлы), то все работает и перейдите к другим моим фрагментам ниже.

Третье: финальная версия gulpfile

Вот решение для ваших нужд, основанное на показанном gulpfile.js:

// =========================================================
// gulpfile.js
// =========================================================
// ------------------------------------------------ requires
var gulp = require('gulp'),
    sass = require('gulp-sass');

// ------------------------------------------------- configs
var paths = {
  sass: {
    src: './furniture/sass/**/*.{scss,sass}',
    dest: './furniture/css',
    opts: {

    }
  }
};

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
  return gulp.src(paths.sass.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.sass.dest))
});

// ------------------------------------ Gulp Testing Message
gulp.task('message', function(){
  console.log('It works!!');
});

// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
  gulp.watch(paths.sass.src, gulp.series('sass'));
});

gulp.task('watch', gulp.series('sass',
  gulp.parallel('watch:styles')
));


// -------------------------------------------- Default task
gulp.task('default', gulp.series('sass', 
  gulp.parallel('message', 'watch')
));

Хотя я сказал, что это окончательная версия, я оставил необязательный message задание в gulpfile, чтобы показать gulp.series а также gulp.parallel на работе. Я кратко расскажу о них в последнем разделе ниже. Это не обязательно и может быть удалено.

Вы также можете заметить, что я добавил задачу наблюдения, которая содержит:
gulp.series('sass', gulp.parallel('watch:styles'))Это так, что вы можете в будущем добавить дополнительные watch: задачи. например watch:scripts,

gulp.series('sass'...) порция это чисто удобный метод. Если вы напишете некоторый код и затем запустите свою задачу gulp, вам нужно будет изменить ее еще раз, прежде чем ваши изменения будут отражены. Добавление 'sass' сначала, перед запуском задач наблюдения, он пройдет до того, как начнет следить за изменениями.

Напоследок: некоторые заметки о Gulp 4 и текущей сборке gulp 4

1. На основе вашего показанного gulpfile, вот несколько указателей на Gulp 4

Gulp 4 теперь использует:

  • gulp.series: Управляет порядком запуска. Он выполняет задачи в последовательном порядке до завершения, например:
    gulp.series('task-name-1', 'task-name-2')
  • 'gulp.parallel': запускает задачи одновременно с ранее выполненными gulp 3, например:
    gulp.parallel('task-name-3', 'task-name-4')

  • seires а также parallel может использоваться вместе, чтобы лучше контролировать поток задач, например:

    gulp.task('example', 
  gulp.series('thisTaskIsRunFirst', 'thisSecond',
    gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));

2. И быстрое исправление для текущей сборки gulp 4

В этих примерах вы заметите, что я использовал gulp.series в watch:styles задача:

    // ---------------------------------------------- Gulp Watch
    gulp.task('watch:styles', function () {
      gulp.watch(paths.sass, gulp.series('sass'));
    });

Это связано, по-видимому, с ошибкой в ​​методе gulp 4 watch. Я предполагаю, что это так, поскольку я не мог заставить задачу наблюдения работать, просто используя 'sass' и вместо этого пришлось использовать gulp.series('sass'),
Я сказал, предположительно, что это ошибка, так как при самостоятельном изучении gulp 4 другие использовали традиционный формат задачи наблюдения с их примерами gulp 4:

gulp.task('watch', function(){
  gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});

Я должен был придумать эту работу вокруг, чтобы использовать часы глотка. Это хорошо, а также может предоставить другие преимущества выполнения некоторых других задач после, если вы хотите.

Я вернусь и предоставлю некоторые учебные ссылки для Gulp 4, как только закончу писать.

Источник
Другие вопросы по тегам