Как заставить gulp следить за изменениями моего файла sass и создавать один файл css?

Я работаю над приложением, разработанным с использованием платформы ASP.NET MVC 5. Я использую Visual Studio 2013 для написания своего приложения.

Мне нужно использовать gulp, чтобы автоматизировать процесс компиляции файла sass и его публикации в файле bundle.css.

Для этого вот что я сделал

  1. На моем компьютере установлен NodeJs.
  2. Установлен gulp глобально с помощью npm install -g gulp
  3. Создал файл с именем gulpfile.js в корне проекта проекта
  4. создал файл package.json с помощью команды npm init
  5. Добавлен gulp к моим зависимостям разработки, выполнив следующую команду из корня моего проекта npm install gulp --save-dev
  6. Добавил код ниже в мой gulpfile.js

  7. Из командной консоли я запустил команду gulp, которая отобразила следующую информацию

    Использование gulpfile...gulpfile.js

    Начинаю смотреть...

    Законченное «наблюдение» через 21 мс

    Запуск "по умолчанию"...

    Готово «по умолчанию» через 31 мкс

Но когда я пишу код в свой ~/Assets/Sass/**/*.sass, ничего не сохраняется в ~/Public/Css/bundle.css, как и ожидалось.

Вот как выглядит gulpfile.js

const gulp = require('gulp'),
      sass = require('gulp-ruby-sass');

// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);

// listener task
gulp.task('watch', function(){

    //Watch any change in the sass directory and trigger the "compileSass" for every save
    gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']);

});

// Task to compile the sass files
gulp.task('compileSass', () =>
    sass('~/Assets/Sass/**/*.sass')
        .on('error', sass.logError)
        .pipe(gulp.dest('~/Public/Css/bundle.css'))
);

Что мне здесь не хватает? Как я могу заставить наблюдаемых смотреть и запускать задачи после каждого сохранения?

Обновлено

Я переключаюсь с использования плагина gulp-ruby-sass на использование gulp-scss. Теперь у меня есть задача запускаться каждый раз, когда я сохраняю файл scss, но по какой-то причине он не обновляет целевой файл.

Вот как выглядит мой файл gulpfile.js

const gulp = require('gulp'),
      scss = require('gulp-scss');

// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);

// listener task
gulp.task('watch', function(){

    //Watch any change in the "Sass" directory and trigger the "compileScss" for every save
    gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']);

});

// Task to compile the "Scss" files
gulp.task('compileScss', function () {
    gulp.src('./Assets/Scss/**/*.scss')
        .pipe(scss({ "bundleExec": true }))
        .pipe(gulp.dest('./Public/Css/bundle.css'));
});

node.js css sass gulp
person Junior    schedule 29.08.2016    source источник
comment
Я не уверен, что gulp понимает тильду в пути (~). Попробуйте начать пути с ./ вместо ~/. Кроме того, я бы проверил, работает ли ваша задача compileSass должным образом при непосредственном вызове (без часов).   -  person Sergey K    schedule 29.08.2016
comment
Спасибо за эту полезную подсказку! теперь я получаю новую ошибку после изменения ~ на . . вот ошибка 'sass' is not recognized as an internal or external command, operable program or batch file. Error in plugin 'gulp-ruby-sass' Message: Gem undefined is not installed.   -  person Junior    schedule 29.08.2016
comment
Если вы хотите использовать gulp-ruby-sass, вам может потребоваться установить Ruby, а также гем sass на вашем компьютере - см. этот вопрос. Однако вам может быть проще просто использовать gulp-sass, если у вас нет хорошая причина использовать gulp-ruby-sass.   -  person Sergey K    schedule 29.08.2016
comment
@SergeyK спасибо. Я переключаюсь на использование gulp-scss, и теперь каждый раз, когда я сохраняю файл с расширением scss, я вижу в консоли новую строку с надписью Starting compileScss.... Finished compileScss`, но файл bundle.css не заполняется. и да, я добавляю код в свои файлы site.scss. Пожалуйста, взгляните на мой обновленный вопрос, чтобы увидеть мой текущий код   -  person Junior    schedule 29.08.2016
comment
Моя следующая рекомендация — убедиться, что он действительно находит ваши файлы scss. Установите подключаемый модуль gulp-debug, а затем передайте ему выходные данные из gulp.src('./Assets/Scss/**/*.scss'), добавив следующий сразу после этой строки: .pipe(debug({})). Затем запустите задачу compileScss и убедитесь, что она на самом деле находит файлы (в ней должны быть перечислены все имена файлов, соответствующие вашему шаблону глобуса — убедитесь, что она не говорит что-то вроде 0 элементов).   -  person Sergey K    schedule 30.08.2016
comment
Спасибо за эту информацию. Он отобразил этот файл Assets\Scss\Site.scss и дал мне 1 элемент. Может быть, он не находит мой файл назначения? является ли .pipe(gulp.dest('./Public/Css/bundle.css')) правильным способом указать, где должен находиться объединенный файл назначения?   -  person Junior    schedule 30.08.2016
comment
Это правильный способ указать пункт назначения. Вероятно, что-то идет не так в вызове scss, и в потоке нет обработчика ошибок, поэтому ошибка проглатывается. Вы можете попробовать добавить обработчик .on('error', ...) в поток (вы можете установить gulp-util и передать его на gutil.log). Я также настоятельно рекомендую вам использовать gulp-sass, а не gulp-scss, так как gulp-scss явно помечен как устаревший.   -  person Sergey K    schedule 30.08.2016
comment
Tangent: если gulp.task('default', ['watch']); действительно является вашей основной задачей, вы можете немного упростить ее с помощью gulp.task('default', function(){ gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']) });   -  person henry    schedule 30.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Возможно, вам не хватает require для gulp-watch:

var watch = require('gulp-watch');

От gulp-watch:

watch(glob, [options, callback]) Создает наблюдатель, который будет следить за файлами, совпадающими с glob, который может быть строкой glob или массивом строк glob.

Возвращает сквозной поток, который будет создавать виниловые файлы (с дополнительным свойством события), соответствующие событию в файловой системе.

Вы должны предоставить функцию. Это означает, что имени задачи недостаточно.

Попробуйте использовать gulp-batch для запуска некоторых задач с часами:

npm install gulp-batch --save-dev

Ваша задача наблюдения:

// listener task
gulp.task('watch', function(){

   var watch = require('gulp-watch');
   var batch = require('gulp-batch');

    //Watch any change in the sass directory and trigger the "compileSass" for every save
    watch('~/Assets/Sass/**/*.sass', batch(function (events, done) {
        // run your compileSass task
        gulp.start('compileSass', done);

    }));

});

Редактировать:

Вы можете запускать задачи из Visual Studio 2015 в окне «Task Runner Explorer».

Однако, если у вас есть запрос на выполнение gulp-watch, он должен иметь тот же эффект и запустить вашу задачу компиляции, когда обнаружит изменения в файлах, которые вы просматриваете, независимо от того, где они были отредактированы.

person Wilmer SH    schedule 29.08.2016
comment
теперь консоль даже не смотрит, как смотрит. он просто выполнил команду и предложил вам ввести новую команду. Я считаю, что gulp поставляется с API-интерфейсом для просмотра, который позволяет вам просматривать файлы. Вот учебник, который показывает, как его использовать, которому я следовал scotch.io/tutorials/automate-your-tasks-easyly-with-gulp-js - person Junior; 29.08.2016
comment
Мои извинения. Честно говоря, я никогда не пользовался встроенными часами gulp. Даже сторонники gulp предлагают плагин gulp-watch. Так что я предположил, что это стандарт. В любом случае, если у вас это заработает, мне было бы интересно узнать, как вы заставили его работать. Я хотел бы помочь вам больше. - person Wilmer SH; 29.08.2016
comment
Использование gulp.watch совсем не редкость. gulp-watch обладает отличной функциональностью, но в таком простом случае нет необходимости добавлять дополнительный вес узловых модулей и вес gulpfile. @WilmerSaint, вы можете узнать gulp.watch за несколько секунд — проверьте задачу sass:watch на npmjs.com /package/gulp-sass - person henry; 30.08.2016

arrow_upward
0
arrow_downward

Основные вещи, которые нужно проверить, — это наличие папки, имена файлов и разрешения на чтение/запись.

Пример gulpfile.js, который использует gulp.watch и gulp-load-plugins в проекте Zurb Foundation 6 с использованием (foundation-cli ).

Обратите внимание, что .pipe(gulp.dest('../your/path/css')); не включает ~ и не указывает имя файла или расширение. Он указывает только путь. Файлу, помещенному по этому пути, по умолчанию присваивается имя style.css, поскольку имя исходного файла — style.scss. См. строку gulp.src('scss/style.scss').

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

// Multiple locations of SCSS to combine
var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/style.scss')           // SCSS Source file
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed'               // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../your/path/css'));     // OUTPUT Destination
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);   // FILES to Watch
});
person nu everest    schedule 10.12.2016