gulp minifies already minified file - javascript

I try to minify separate .js-files with gulp. Like:
file_one.js --> file_one.min.js
file_two.js --> file_two.min.js
It works the first time I execute gulp. But if I run it a second time it looks like this:
file_one.js
file_one.min.js
file_one.min.min.js
file_two.js
file_two.min.js
file_two.min.min.js
And it repeats that pattern every timme i execute gulp. How can I stop it from minify already minified js.
I use the following code:
gulp.task('scripts', function() {
return gulp.src('dest/*js')
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest'));
});

You can put the minified files in a different directory, or you can exclude them in the gulp.srclike this:
gulp.task('scripts', function() {
return gulp.src(['dest/*.js', '!dest/*.min.js'])
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest'));
});

This is happening because you are saving the minified files in the same directory of your non minified files. The first part of your stream (gulp.src) reads all files inside your dest folder. Since you are saving your minified files to the very same folder, it is minifying them again on the second time it is run. the You have some options:
Change the output folder to something else (for instance gulp.dest('build'))
Change gulp.src to match only the non-minified files

You are having problem with duplicate so you need to delete the destination file first to re-run the file. See Example:
//clean
gulp.task('clean', function(){
return del(['dist']);
});
//Default task
gulp.task('default',['clean'], function(){
gulp.start('usemin','imagemin','copy','views');
});

Related

Gulp Watch doesn't detect changing in SASS SCSS folder

I have set up Gulp for the first time to compile SCSS to CSS using NanoCSS and gulp-css.
I have created a do-sass that successfully compiles SCSS and minifies the CSS.
However, when I place this in a watch task, it does not work.
If I change any of my SCSS files the do-sass command does not run. Can anyone tell me what I have done wrong?
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('./'))
});
// Minifys .css and reload browser.
gulp.task('mini-css', function() {
return gulp.src('styles.css')
.pipe(cssnano())
.pipe(gulp.dest('./'));
});
// Compile and minify css.
gulp.task('do-sass', gulp.series('sass', 'mini-css'));
gulp.task('watch', function(){
gulp.watch('scss/*/.scss', gulp.series('do-sass'));
});
The glob pattern used by your watch task is probably incorrect: scss/*/.scss will not look for the SCSS files you want, because it will try to traverse one more directory deeper and look for files that are named .scss (without any file name, just the extension).
What you want is to use the double-star syntax, if you want to glob any SCSS files that are nested at any level:
scss/**/*.scss
Therefore, if you update your watch task as such, it should work:
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
});

Gulp looping a watch task

I'm new in Gulp and this is my code that just minifies my JS script:
gulp.task('minify-js', function(){
return gulp.src(['assets/js/**/*.js', '!assets/js/**/*.min.js'])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/js'))
});
gulp.task('watch', function(){
//gulp.watch(['sass/**/*.sass'], gulp.series('css-files'));
gulp.watch(['assets/js/**/*.js'], gulp.series('minify-js'));
});
gulp.task('default', gulp.series('watch'));
When I run gulp default and edit any JS file, my task starts looping for no reason and the files keep being minified and merged aswell. Why? It should stop after one execution!
example:
*This code runs perfectly without the watch task
Any help?
Your destination file matches the mask of source files.
So Gulp process the file it just generated themself. And then again, and again.
Update: you've excluded the file in minify-js task, but not excluded in watch task. Set watch argument the same as for minify-js and that should help.

gulp-rev with useref renaming index.html file as well

I'm new to using gulp and am trying to create a gulpfile for my project.
My first task is to combine all my script and link tags present in index.html and replace them with only a single tag. To achieve this purpose, I'm making use of gulp-useref as below.
gulp.task('useref', ['clean'], function () {
return gulp.src(config.paths.app.src + 'index.html')
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(useref())
.pipe(gulp.dest(config.paths.dist.src))
});
This thing simply concatenates and minifies all my JS and CSS files and create a single script and link tag for them. All good till here.
Now, I wish to implement hashing to the combined JS and CSS files as well. For this, I'm using gulp-rev and gulp-rev-replace plugin like below.
gulp.task('useref', ['clean'], function () {
return gulp.src(config.paths.app.src + 'index.html')
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(useref())
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(config.paths.dist.src))
});
This also works good but for one small thing. It creates the hashed filenames not only for my JS and CSS files but for my index.html file as well as below.
Is there a way by which I can avoid the renaming of index.html file while still preserving the JS and CSS hashed filenames because my server would look for the index.html file in the folder rather than index-*********.html?
Thanks.
I'm not sure if this is the ideal way to solve the problem, but my solution was to apply gulpif to filter out css/js assets and then call rev(). revReplace should still update your index file to use the renamed css/js assets.
Essentially you can add the following pipe to your stream:
.pipe(gulpif(*.{js,css}, rev()))
Example based on your code:
gulp.task('useref', ['clean'], function () {
return gulp.src(config.paths.app.src + 'index.html')
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(useref())
.pipe(gulpif('*.{js,css}', rev()))
.pipe(revReplace())
.pipe(gulp.dest(config.paths.dist.src))
});
I had the same issue, but I was using gulp-rev-all instead of gulp-rev like you are.
My solution (workaround) will still work for you and others that are interested.
Essentially, you need to run another gulp-task after you 'rev' all of your files.
I use gulp-inject to grab the newly revisioned files, and inject them into my index.html file.
Step 1: use gulp-rev or gulp-rev-all in my case to revision your files and save them to your /dist folder.
Example:
gulp.task('rev', function () {
var css= gulp
.src(styles)
.pipe(concat('main.css'))
.pipe(RevAll.revision())
.pipe(gulp.dest('dist/css'));
var js = gulp
.src(scripts)
.pipe(concat('scripts.js'))
.pipe(RevAll.revision())
.pipe(gulp.dest('dist/js'));
return merge(css, js); //merge is from the gulp plugin merge-stream. It allows me to manipulate multiple streams in 1 task instead of having separate tasks.
});
Step 2:
Use gulp-inject to inject the newly created css/js file references into your index.html
Markup your index.html like this:
<!-- inject:css -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
Step 3:
Use gulp-inject to grab the newly revisioned files and inject them into your index.html
gulp.task('inject',
function() {
var jsSource = gulp.src('./dist/js/*.js', { read: false });
var cssSource = gulp.src('./dist/css/*.css', { read: false });
return gulp.src('./index.html')
.pipe(inject(merge(jsSource, cssSource)))
.pipe(clean({force:true}))
.pipe(gulp.dest('./'));
});
In my project, I do NOT put the index.html in the dist folder. Maybe I should, but in this example/project I do not.
My folder structure
index.html
--/dist
---/js
---/css
---/views
gulp-inject documentation
gulp-rev-all documentation
Please let me know if there are any further questions, I would love to answer them
try
var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });
return gulp
.src('......')
.pipe('......')
.pipe('......')
.pipe(ignoreIndexHtml)
.pipe($.rev())
.pipe(ignoreIndexHtml.restore)
.pipe($.revReplace())
.pipe(gulp.dest('......'));

Why isn't my gulp task running?

I'm using the following code because grabbing the whole js folder won't honor file sequence. So I select file by file, but it won't produce the site.min.js file even though no error is given.
gulp.task("minjs", function () {
gulp.src([
'js/site.js',
'js/directives/navbar.js',
'js/directives/Select.Lang.js'
])
.pipe(concat('site.min.js'))
.pipe(uglify())
.pipe(gulp.dest("wwwroot/js/"));
});
Updated:
No, it's not the return. I tried that too. I also searched trough my PC if a file was generated, but there's no file and the weirdest thing is that the gulp task shows no error.
Notice the return statement:
gulp.task("minjs", function () {
return gulp.src([
'js/site.js',
'js/directives/navbar.js',
'js/directives/Select.Lang.js'
])
.pipe(concat('site.min.js'))
.pipe(uglify())
.pipe(gulp.dest("wwwroot/js/"));
});

LESS-Gulp concatenation, how to not repeat variables import?

Here is my gulpfile config, it lessify, concat into a single .css, remove comments, minify everything, and is outputted. Also very important : a sourcemap file is produced.
gulp.task('less', function() {
return gulp.src(src)
.pipe(sourcemaps.init())
.pipe(sort({
asc: false
}))
.pipe(less())
.pipe(concat('responsive.css'))
.pipe(stripCssComments())
.pipe(minifyCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(dest));
});
Let's say I have 5 .less files.
a.less, b.less, c.less, d.less, variables.less
Each less file (except variables.less) has #import 'variables.less', otherwise the compilation will not work.
In the final css file, the content of variables.less is repeated 5 times, obviously, because I imported it in each file.
How can I keep my sourcemapping without repeating the variables 5 times in the built .css ?

Categories