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的最佳方法是什麼？如果任務只編譯了必要的內容（我已經看到了一些可以隨時編譯所有內容的任務），那麼這將是理想的。