как настроить задачу gulp watch с gulp.spritesmith - PullRequest
Новая
       49

как настроить задачу gulp watch с gulp.spritesmith

0 голосов
/ 27 ноября 2018

моя цель:

Я хочу скомпилировать файл sprite.png из файлов, содержащихся в папке: ./source/Assets/Sprites/*.png, используя gulp версии 4 (никогда раньше не использовался, просто небольшой опыт работы с grunt).

Я пытался с плагином gulp.spritesmith, адаптируя пример в документации;вот что я написал до сих пор: 

'use strict';

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
    var spriteData = gulp.src('./source/Assets/Sprites/*.png')  
        .pipe(spritesmith({
            imgName: '../Images/sprite.png',
            cssName: '_sprite.scss'                       
        }));       
    var imgStream =  spriteData.img
    .pipe(buffer())
    .pipe(gulp.dest('./source/Assets/Images/'));
    var cssStream =  spriteData.css.pipe(gulp.dest('./source/Scss'));   
    return merge(imgStream, cssStream);      
});

файл _sprite.scss также импортируется в файл app.scss, скомпилированный с gulp-sass

Пока что все работает довольно хорошохорошо.

Моя проблема: я хочу настроить задачу watch, которая будет выполнять задачу каждый раз, когда файл ./source/Assets/Sprites/ добавляется, удаляется или изменяется.

Я написал вthe gulpfile.js: 

gulp.task('watch', function() { 
  gulp.watch('./source/Assets/Sprites/*.png', gulp.series('sprite'));
  gulp.watch(['./source/Scss/**/*.scss', 'node_modules/boostrap/scss/**/*'], gulp.series('sass', browserReloadSync));
});

проблема в том, что задача наблюдения работает (она запускается, когда, например, я добавляю файл), но файл scss становится чем-то вроде

{$ASYNCID$2$0$}{$ASYNCID$2$1$}{$ASYNCID$2$2$} {$ASYNCID$2$3$}{$ASYNCID$2$4$} {$ASYNCID$2$5$}{$ASYNCID$2$6$} Я уверен, что что-то забыл, могу ли я попросить помощи?Спасибо!

...