gulp - 如何用手表连接多个文件?
gulp - How to concatenate multiple files with watch?
我想 select 几个文件,并从它们生成串联文件。并且还想连接我更改的文件。
这是我的资产树:
assets
- css
- js
- sass
- _midia_queries.scss
- media-combine.scss
- query.scss
所以,我想生成maximum.css(./assets/css/media-combine.min.css)和 medium.css(./assets/css/media-combine.min.css, ./assets/css/query.min.css).
两个 .min 文件都是由我的 css 任务生成的。见下文:
gulp.task('css', function (done) {
gulp.src(paths.sass.src)
.pipe(plugins.changed('dist'))
.pipe(plugins.sass())
.pipe(plugins.combineMediaQueries())
.pipe(plugins.autoprefixer())
.pipe( isProduction ? plugins.minifyCss() : gutil.noop() )
.pipe( isProduction ? plugins.rename({ suffix: ".min" }) : gutil.noop() )
.pipe(gulp.dest(paths.css.dest))
.on("end", done);
});
我的 concat-css 任务使用了我的多生成文件的错误方法:
gulp.task('concat-css', ['css'], function (done) {
concatType("css", done);
});
function concatType (type, done) {
if (isProduction) {
var task = gulp;
filesToConcat[type].forEach(function (value) {
value.files.forEach(function (file, fileIndex) {
value.files[fileIndex] = paths[type].dest + file;
});
gutil.log('File', gutil.colors.green(value.compiled), 'is beign concatenated');
task = gulp.src(value.files)
.pipe(plugins.concat(value.compiled))
.pipe(gulp.dest(paths[type].dest));
gutil.log('Ready to go!');
});
task.on("end", done);
}
}
更新
当我在 console/terminal 上键入 gulp 时,它 运行 完全符合我的 css 和 concat-css 任务,但是,当文件更改触发 watch 任务时,运行,但是,只有 css 有效。我的 .min 文件已更新,但我的串联文件未更新。
有什么想法可以解决这个问题吗?谢谢。
抱歉,这是一个逻辑问题。
在我的 concatType 函数中,当我为目标文件设置路径时,但是,当它是 运行 时,第二次设置了路径,如下所示:
./assets/css/./assets/css/query.min.css
永远行不通。所以,我改变了这个:
value.files.forEach(function (file, fileIndex) {
value.files[fileIndex] = paths[type].dest + file;
});
task = gulp.src(value.files)
为此:
files = [];
value.files.forEach(function (file) {
files.push(paths[type].dest + file);
});
task = gulp.src(files)
我想 select 几个文件,并从它们生成串联文件。并且还想连接我更改的文件。
这是我的资产树:
assets
- css
- js
- sass
- _midia_queries.scss
- media-combine.scss
- query.scss
所以,我想生成maximum.css(./assets/css/media-combine.min.css)和 medium.css(./assets/css/media-combine.min.css, ./assets/css/query.min.css).
两个 .min 文件都是由我的 css 任务生成的。见下文:
gulp.task('css', function (done) {
gulp.src(paths.sass.src)
.pipe(plugins.changed('dist'))
.pipe(plugins.sass())
.pipe(plugins.combineMediaQueries())
.pipe(plugins.autoprefixer())
.pipe( isProduction ? plugins.minifyCss() : gutil.noop() )
.pipe( isProduction ? plugins.rename({ suffix: ".min" }) : gutil.noop() )
.pipe(gulp.dest(paths.css.dest))
.on("end", done);
});
我的 concat-css 任务使用了我的多生成文件的错误方法:
gulp.task('concat-css', ['css'], function (done) {
concatType("css", done);
});
function concatType (type, done) {
if (isProduction) {
var task = gulp;
filesToConcat[type].forEach(function (value) {
value.files.forEach(function (file, fileIndex) {
value.files[fileIndex] = paths[type].dest + file;
});
gutil.log('File', gutil.colors.green(value.compiled), 'is beign concatenated');
task = gulp.src(value.files)
.pipe(plugins.concat(value.compiled))
.pipe(gulp.dest(paths[type].dest));
gutil.log('Ready to go!');
});
task.on("end", done);
}
}
更新
当我在 console/terminal 上键入 gulp 时,它 运行 完全符合我的 css 和 concat-css 任务,但是,当文件更改触发 watch 任务时,运行,但是,只有 css 有效。我的 .min 文件已更新,但我的串联文件未更新。
有什么想法可以解决这个问题吗?谢谢。
抱歉,这是一个逻辑问题。
在我的 concatType 函数中,当我为目标文件设置路径时,但是,当它是 运行 时,第二次设置了路径,如下所示:
./assets/css/./assets/css/query.min.css
永远行不通。所以,我改变了这个:
value.files.forEach(function (file, fileIndex) {
value.files[fileIndex] = paths[type].dest + file;
});
task = gulp.src(value.files)
为此:
files = [];
value.files.forEach(function (file) {
files.push(paths[type].dest + file);
});
task = gulp.src(files)