For my ongoing WordPress projects, I am simultaneously working on themes and plugins. In my theme folder, I have a gulpfile.js that compiles .scss files into .css. I am considering creating a central "master" gulpfile in the root folder to compile .scss files from any folder that contains a /scss folder, generating a corresponding /css folder (similarly for js files, images, etc).
Here is the task I currently have for compiling .scss files:
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' ] );
});
What would be the most effective way to create a master gulpfile.js that functions in this manner? I am aiming for a task that only compiles what is necessary, as opposed to compiling everything all the time.