script files not loading in rev-manifest.json (gulp) - gulp

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.

Related

Merge multiple scss files into one css file

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))
});

Watch for changes in subdirectories but target a single file as src in Gulp

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"]);

Jekyll clear build folder with Gulp

I'm using a build environment with Jekyll + Gulp. So, using the gulpfile.js below, the build process generate first a dist/css folder with the compiled css inside, and then clear the entire dist folder for put the jekyll build result inside. So, i'm not able to compile the scss files inside the dist folder because every time jekyll it completely clear it.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var child = require('child_process');
gulp.task('jekyll', function (done) {
return child.spawn('jekyll' , ['build']).on('close', done);
});
gulp.task('jekyll-rebuild', ['jekyll'], function () {
browserSync.reload();
});
gulp.task('browser-sync', ['sass', 'jekyll'], function() {
browserSync({
server: {
baseDir: 'dist'
}
});
});
gulp.task('sass', function () {
return gulp.src('src/_sass/theme.scss')
.pipe(sass({
includePaths: ['scss'],
onError: browserSync.notify
}))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watch', function () {
gulp.watch('src/_sass/*.scss', ['sass']);
gulp.watch(['src/*.html', 'src/_layouts/*.html', 'src/_includes/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'watch']);
I have to avoid running jekyll task in parallel with styles and scripts so I have used a runSequence.
gulp.task('build', () => {
runSequence('jekyll', ['styles', 'scripts']);
});
gulp.task('default', ['build', 'browser-sync', 'watch']);
In your Jekyll config you need to declare which folders you want to keep:
keep_files: [ css, build ]
When clobbering the site destination, keep the selected files. Useful for files that are not generated by jekyll; e.g. files or assets that are generated by your build tool. The paths are relative to the destination.
https://jekyllrb.com/docs/configuration/

Using parent directory of file-directory as destination in gulp

How can I use the parent directory of a file-directory of a wildcard source in gulp?
Source files:
|gulpfile.js (just to show where the base is)
|elements/foundations/A/js/src/mainA.js
|elements/foundations/A/js/src/subA.js
|elements/foundations/B/js/src/mainB.js
...
|elements/foundations/F/js/src/mainF.js
Desired target/result:
|elements/foundations/A/js/mainA.min.js
|elements/foundations/A/js/subA.min.js
|elements/foundations/B/js/mainB.min.js
...
|elements/foundations/F/js/mainF.min.js
I've tried different approaches, but eventually none of them worked.
This one runs without errors but doesn't generate any files.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/**/'})
.pipe(rename({suffix: '.min'}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./'))
;
});
This one generates files, but directly in the src directory.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/'))
;
});
And if I try to use the wildcard (**) in the destination, gulp ends up in an infinite loop (independently of the position of the wildcard).
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/**/'))
;
});
I've also tried to use it without setting the base, but the results were similar.
You can pass a function to gulp-rename for more complex renaming operations. This allows you for example to use the path module of node.js to manipulate file paths:
var gulp = require('gulp');
var rename = require('gulp-rename');
var path = require('path');
gulp.task('scripts', function() {
return gulp.src('./elements/foundations/**/js/src/*.js')
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname);
file.basename = file.basename + '.min';
return file;
}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./elements/foundations/'))
});

How to use gulp-watch?

What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))