在 Gulp.js 4 函数中为几个文件名创建一个 for 循环
Create a for loop for several file names in a Gulp.js 4 function
我目前正在尝试每页使用一个 svg sprite,这样它只会为每个单独的页面加载必要的 svg。目前正在工作,但我想创建一个数组,以便为我想要的 N 页调用任务。
我目前在 gulpfile.js(第 4 节)中有这个结构:
var autoprefixer = require('autoprefixer'),
browsersync = require('browser-sync').create(),
cssnano = require('cssnano'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
newer = require('gulp-newer'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
svgSprite = require('gulp-svg-sprite');
//Create SVG's into one single image file
function svgs(){
return gulp
.src('app/images/src/pageName/*')
.pipe(svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: './',
layout: 'diagonal',
sprite: 'images/dist/pageName/sprite.svg',
bust: false,
render: {
scss: {
dest: 'sass/modules/sprites/_pageName.scss',
template: 'app/sass/modules/sprites/_pageNameTemplate.scss'
}
}
}
},
variables: {
mapname: 'icons'
}
}))
.pipe(gulp.dest('app/'));
}
exports.svgs = svgs;
想法是创建一个包含页面名称的数组并执行 for 循环:
var pages = ['page1', 'page2',...];
function svgs(){
for (var i = 0; i < pages.length; i++) {
return gulp
.src('app/images/src/' + pages[i] + '/*').........
}
然后在控制台中调用任务,但是 return 只执行一次迭代,有人以前有过这个吗?
谢谢!
尝试glob.sync它returns一个数组:
const glob = require('glob');
const pageArray = glob.sync('path/to/your/*.pages');
function svgs(done) {
pageArray.forEach( page => {
return gulp.src(page)
...
};
done();
}
我目前正在尝试每页使用一个 svg sprite,这样它只会为每个单独的页面加载必要的 svg。目前正在工作,但我想创建一个数组,以便为我想要的 N 页调用任务。
我目前在 gulpfile.js(第 4 节)中有这个结构:
var autoprefixer = require('autoprefixer'),
browsersync = require('browser-sync').create(),
cssnano = require('cssnano'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
newer = require('gulp-newer'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
svgSprite = require('gulp-svg-sprite');
//Create SVG's into one single image file
function svgs(){
return gulp
.src('app/images/src/pageName/*')
.pipe(svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: './',
layout: 'diagonal',
sprite: 'images/dist/pageName/sprite.svg',
bust: false,
render: {
scss: {
dest: 'sass/modules/sprites/_pageName.scss',
template: 'app/sass/modules/sprites/_pageNameTemplate.scss'
}
}
}
},
variables: {
mapname: 'icons'
}
}))
.pipe(gulp.dest('app/'));
}
exports.svgs = svgs;
想法是创建一个包含页面名称的数组并执行 for 循环:
var pages = ['page1', 'page2',...];
function svgs(){
for (var i = 0; i < pages.length; i++) {
return gulp
.src('app/images/src/' + pages[i] + '/*').........
}
然后在控制台中调用任务,但是 return 只执行一次迭代,有人以前有过这个吗?
谢谢!
尝试glob.sync它returns一个数组:
const glob = require('glob');
const pageArray = glob.sync('path/to/your/*.pages');
function svgs(done) {
pageArray.forEach( page => {
return gulp.src(page)
...
};
done();
}