Question

我的目标：

我要从包含的文件中编译一个sprite.png文件进入文件夹：./source/Assets/Sprites/*.png，使用gulp版本4（以前从未使用过，只是有点咕gr的经验。

我尝试使用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文件也导入了一个用gulp-sass编译的app.scss文件中。

到目前为止，一切似乎都很好。

我的问题：我想设置一个watch任务，每次添加或删除或修改文件./source/Assets/Sprites/时都执行该任务。

我已经在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));
});

问题是watch任务可以运行（例如，当我添加文件时会触发它），但是scss文件变成类似

{$ASYNCID$2$0$}{$ASYNCID$2$1$}{$ASYNCID$2$2$} {$ASYNCID$2$3$}{$ASYNCID$2$4$} {$ASYNCID$2$5$}{$ASYNCID$2$6$} 我确定我忘记了一些东西，请问可以帮忙吗？谢谢！

如何使用gulp.spritesmith设置gulp watch任务

0 个答案: