0
我经常在几个WordPress项目上工作，我在这里同时构建主题和插件。我的主题文件夹中有一个gulpfile.js，它将.scss编译为.css文件。我想知道是否可以构建某种“主”大文件，将其放在根文件夹中，然后在我们拥有它们时编译.scss文件。这个想法是，如果任何文件夹包含/ scss文件夹，那么Gulp会编译它的主要.scss文件，然后生成一个/ css文件夹（同样的想法可以适用于编译的js文件，图像等）。Gulpfile.js处理多个文件夹中的多个文件
这是我编译.scss文件的任务。
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
cache = require('gulp-cache'),
notify = require('gulp-notify'),
projectTitle = 'Project Name';
// styles task
gulp.task('styles', function() {
return gulp.src('src/styles/*.scss')
.pipe(sass({ paths: ['src/styles/'], outputStyle: 'expanded' }))
.pipe(notify({
title: projectTitle,
message: 'File: <%= file.relative %> was compiled!'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('assets/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(notify({
title: projectTitle,
message: 'Minified file: <%= file.relative %> was created/updated!'
}))
});
// styles task
gulp.task('editor-styles', function() {
return gulp.src('src/styles/editor-styles.scss')
.pipe(plumber())
.pipe(sass({ paths: ['src/styles/'] }))
.pipe(notify({
title: projectTitle,
message: 'File: <%= file.relative %> was compiled!'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('assets/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(notify({
title: projectTitle,
message: 'Minified file: <%= file.relative %> was created/updated!'
}))
});
// watch task
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', [ 'styles' ]);
});
在这种情况下建立一个像这样的全局gulpfile.js的最佳方法是什么？如果任务只编译了必要的内容（我已经看到了一些可以随时编译所有内容的任务），那么这将是理想的。