Build 用一个命令从多个sass文件夹中编译多个css?
我有以下文件结构:Build 用一个命令从多个sass文件夹中编译多个css?,build,sass,gulp,Build,Sass,Gulp,我有以下文件结构: themes folder1 -scss -style.scss folder2 -scss -style.scss foldern -scss -style.scss package.json gulpfile.js 需要此格式的输出: themes folder1 -scss -style.scss css -style.css folder
themes
folder1
-scss
-style.scss
folder2
-scss
-style.scss
foldern
-scss
-style.scss
package.json
gulpfile.js
需要此格式的输出:
themes
folder1
-scss
-style.scss
css
-style.css
folder2
-scss
-style.scss
css
-style.css
foldern
-scss
-style.scss
css
-style.css
package.json
gulpfile.js
gulpfile.js:
(function () {
'use strict';
var gulp = require('gulp'),
eslint = require('gulp-eslint'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps')
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./**/css'));
});
gulp.task('watch', gulp.series('sass', function () {
gulp.watch('./scss/**/*.scss', gulp.series('sass'));
}));
})();
当我使用上面的gulpfile编译时,它会在主题目录中创建**/css/folder1/stle.css**/css/folder2/style.css文件夹。如何以这种格式编译?gulp中是否有任何特定的插件用于此。
提前感谢。试试这个:
var gulp = require('gulp'),
sass = require('gulp-sass'),
// etc.
// two more plugins
rename = require('gulp-rename')
path = require('path');
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
// rename the current file's parent directory
.pipe(rename(function (file) {
// file.dirname = current folder, your "scss"
// then get the parent of the current folder, e.g., "folder1", "folder2", etc.
let parentFolder = path.dirname(file.dirname)
// set each file's folder to "folder1/css", "folder2/css", etc.
file.dirname = path.join(parentFolder, 'css');
}))
.pipe(gulp.dest('.'));
});
这也是在scss文件夹中创建CSS文件夹。这不是为我做的。你有没有之前测试的散乱文件?试着从一个干净的文件夹和文件结构开始,就像你在问题中提出的那样。我的结构是:scss->base->base.scss,scss->global->global.scss