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

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 ?

Related

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.

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

Browserify adding unwanted directories

Setting up gulp for the first time. I've got it correctly compiling the files, it's just sticking them in the wrong place, and I can't quite figure out what to change to get it right.
After they compile, I have it adding the .conveyor.js suffix and then I want it to place them in the /scripts directory. But it's placing them in /scripts/src/js/ — it's adding a couple subdirectories. The raw dev files themselves are in src/js/ directories in a separate location, but I don't want that to carry over. Here's my gulp setup:
module.exports = function() {
var files = [
'./src/js/dashboard.js',
'./src/js/pages.js',
'./src/js/poll.js'
];
var tasks = files.map(function(entry) {
return browserify({
entries: [entry],
paths: ['./node_modules', './src/js/']
})
.bundle()
.pipe(source(entry))
.pipe(rename({
extname: '.conveyor.js'
}))
.pipe(gulp.dest('../scripts/'));
});
return es.merge.apply(null, tasks);
};
The way I understand it, "files" are all of the files it looks for to compile. "paths" allow you to specify directories that your require statements can be relative to so you don't have to do a bunch of period-forwardslashing. and then "dest" is where you want the files to end up. But I'm clearly misunderstanding something.
The offender is here
.pipe(source(entry))
entry is set to the exact path you are using for the files path. Hence the duplication.
source() in this isn't the source of the file, but ends up being the file that gets created.
You would want to modify the object to provide just the file name as the entry and the source path is separated. Also, you can drop the rename method, I think.

gulp minifies already minified file

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

how to minify a whole folder content using grunt.js

Instead of mention every js seperatly,
is this the way to minify and concatinate a whole js folder?
module.exports = function(grunt) {
grunt.initConfig({
min: {
dist: {
src: ['scripts/*.js'],
dest: 'dist/built.min.js'
}
}
});
};
Yes, that's correct if you only want to concatenate and minify all .js files in the scripts directory one level deep.
For example, if scripts/ contains a.js and b.js and the foo/ directory, you'd get the concatenation and minified result of a.js + b.js but nothing in the foo/ directory.
What if you want to get everything in the foo/ directory (and all other nested directories) as well? Change the expression from ['scripts/*.js'] to ['scripts/**/*.js'] -- or any minimatch expression:
https://github.com/gruntjs/grunt/blob/master/docs/api_file.md#gruntfileexpand
You're able to use any minimatch expression since the grunt min task uses the expandFiles function:
https://github.com/gruntjs/grunt/blob/master/tasks/min.js#L21
The downside to using a minimatch expression with this task is it's hard to understand what order the files will be concatenated in, which is often very important. Be careful if this matters.
Also, please note that a new version of grunt (0.4) is coming out very soon. This will make this answer obsolete, as the min task has been changed in 0.4 (but will still support minimatch expression).
If your folder consist only js files you are right but if your folder have nested folders such as, foo is our main js folder in which we have another nested folder loo and inside it we also have some js files such as :
foo:
mu.js
su.js
loo:
ku.js
wu.js
In this case you have to modify your code in such manner :
module.exports = function(grunt) {
grunt.initConfig({
min: {
dist: {
src: 'foo/**/*.js',
dest: 'dist/foo.min.js'
}
}
});
};
by doing in such a way you can minimize your all js files of foo folder even nested folder files too. I suggest cocat js files before minimizing.

Categories