I am working on a Gulp file for WordPress development. I create Themes & Plugins so require my Gulpfile to watch for sass changes for both.
I currently have 2 paths defined and a separate Gulp task for plugins & themes, however I would like to try and improve this by having a single Sass task that can use either path.
// File paths
const files = {
themeScssPath: 'htdocs/wp-content/themes/**/assets/src/scss/**/*.scss',
pluginScssPath: 'htdocs/wp-content/plugins/jhdev-*/assets/src/scss/**/*.scss',
}
// Theme Sass: compiles Theme style.scss file into style.css
function themeScssTask(){
return src(files.themeScssPath, {base: "./"})
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(rename(function (path) {
path.dirname += "/../../dist";
}))
.pipe(rename({ suffix: ".min" }))
.pipe(dest('./'))
}
// Plugin Sass: compiles Theme style.scss file into style.css
function pluginScssTask(){
return src(files.pluginScssPath, {base: "./"})
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(rename(function (path) {
path.dirname += "/../../dist";
}))
.pipe(rename({ suffix: ".min" }))
.pipe(dest('./'))
}
// Watch task: watch SCSS and JS files for changes
function watchTask(){
watch([files.themeScssPath, files.pluginScssPath],
parallel(themeScssTask, pluginScssTask));
}
exports.default = series(
parallel(themeScssTask, pluginScssTask),
watchTask
);
How about something like:
// File paths
const files = [
'htdocs/wp-content/themes/**/assets/src/scss/**/*.scss',
'htdocs/wp-content/plugins/jhdev-*/assets/src/scss/**/*.scss'
];
// Sass: compiles *.scss file into *.css
function scssTask(){
return src(files, {base: "./"})
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(rename(function (path) {
path.dirname += "/../../dist";
}))
.pipe(rename({ suffix: ".min" }))
.pipe(dest('./'))
}
// Watch task: watch SCSS and JS files for changes
function watchTask(){
watch(files, scssTask);
}
exports.default = series(
scssTask,
watchTask
);
Related
I have this gulpfile.js where I'm minifying my js files the problem is that when I'm doing gulp build this task is creating the minified js files but not entering the key-value pairs in the rev-manifest.json.
gulp.task('js', function (done) {
console.log('minifying js...');
gulp.src('./assets/**/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./public/assets'))
.pipe(rev.manifest({
cwd: 'public',
merge: true
}))
.pipe(gulp.dest('./public/assets'));
done()
});
I have a similar task for my scss files which converts scss to CSS and then minifies it. this is working absolutely fine adding proper key-value pairs in the rev-manifest.json
gulp.task('css', function (done) {
console.log('minifying css...');
gulp.src('./assets/sass/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets.css'));
gulp.src('./assets/**/*.css')
.pipe(rev())
.pipe(gulp.dest('./public/assets'))
.pipe(rev.manifest({
cwd: 'public',
merge: true
}))
.pipe(gulp.dest('./public/assets'));
done();
});
this is what rev-manifest.json looks like
See it's only adding the css files here but not js files.
my rev-manifest.json is present inside public/assets/
In my case, manifests were not merging, they were getting overwritten. gulp.dest() causes the file to be overwritten. We indeed have to pass the path of the manifest as parameter before the options if we want the merge to work, here is the working code :
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cssnano = require('gulp-cssnano');
const rev = require('gulp-rev');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const del = require('del');
gulp.task('css', function(done){
console.log('minifying css...');
gulp.src('./assets/sass/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets/'));
return gulp.src('./assets/**/*.css')
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done();
});
gulp.task('js', function (done) {
console.log('minifying js...');
gulp.src('./assets/**/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done()
});
gulp.task('images', function(done){
console.log('compressing images...');
gulp.src('./assets/**/*.+(png|jpg|gif|svg|jpeg)')
.pipe(imagemin())
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done();
});
// empty the public/assets directory
gulp.task('clean:assets', function(done){
del.sync('./public/assets');
done();
});
gulp.task('build', gulp.series('clean:assets', 'css', 'js', 'images'), function(done){
console.log('Building assets');
done();
});
I just deleted the rev-manifest.js file and build it again and it worked. Took me a day to do this.
Why God Why.
I'd like to merge all of my scss files into one compressed css file:
Structure:
stylesheets/
test.scss
test2.scss
gulpfile.js
I tried this two tasks, which I found in several answers and tutorials, but I always got the scss file into a duplicated css file:
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
and
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/styles.css'))
});
!!! EFFECTIV RESULT !!!
stylesheets/
test.scss
test2.scss
css/
test.css
test2.css
gulpfile.js
or with second tried task:
stylesheets/
test.scss
test2.scss
css/styles.css/
test.css
test2.css
gulpfile.js
??? EXPECTED RESULT ???
stylesheets/
test.scss
test2.scss
css/
styles.css
gulpfile.js
Any ideas?
You indicated that you want to merge your files into one file and compress that file, so you need to add two plugins to do each of those.
Gulp-concat and gulp-uglify
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(uglify())
// .pipe(rename({
// basename: "styles",
// suffix: ".min",
// extname: ".css"
// }))
.pipe(gulp.dest('css'))
});
In addition, you may want to add gulp-rename to indicate that the file has been uglified/minified via a .min.css extension (and change your html link to point to that filename).
Hope this hepls.
gulp.task('styles', () => {
gulp.src([path.src.sass])
.pipe(sassGlob())
.on('error', util.log)
.pipe(sass({
includePaths: ['src/scss'],
}))
.on('error', util.log)
.pipe(gulp.dest(path.dist.css))
});
I have the following gulp task:
gulp.task("stylePipe", function(){
var postcssPlugins = [
autoprefixer({browsers: ['last 2 version']}), // autoprefixer
cssnano() // css minifier
];
gulp.src("src/sass/*.scss")
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on("error", sass.logError)) // scan for errors
.pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest("dist/css")); // compile into dist
});
gulp.task("styleWatch", ["stylePipe"], browsersync.reload);
gulp.task("watch", function(){
browsersync({
server: {
baseDir: "dist/"
}
});
gulp.watch("src/sass/*.scss", ["styleWatch"]);
});
I want to watch for changes in all the subdirectories listed below
using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).
How can I accomplish this?
I simply modified
gulp.watch("src/sass/*.scss", ["styleWatch"]);
into
gulp.watch("src/sass/**/*.scss", ["styleWatch"]);
Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
I have a task in Gulp that compile a less file in css. I want to output the non-minify and the minify version with sourcemaps. I can't find a soluction.
This is my actual task that should do this job:
return gulp.src(['./src/less/main.less'])
.pipe(sourcemaps.init())
.pipe(less({
paths: ['node_modules'],
}))
.pipe(sourcemaps.write('.'))
.pipe(cssnano())
.pipe(rename(function (path) {
console.log(path);
path.basename = path.basename.split('.')[0] + '.min' + (path.basename.split[1] || ''); //to change the name from main.css to main.min.css
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css/'));
I get an error because cssnano want minify the map file. Can someone post his complete task with that feature?
Thank you in advance!
Something like this using 'gulp-clone' package:
var files = gulp.src(['./src/less/main.less']);
files
.pipe(clone())
.pipe(sourcemaps.init())
.pipe(less())
.pipe(cssnano())
.pipe(sourcemaps.write('.'));
files
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('.'));