I currently use gulp for most of my automation tasks. To keep the process optimised I check for file changes before processing the file. The problem is that when I rebuild my files and only a single file in the set has changed, the concat file only includes the changed file. Is there a way to pickup all the files in case of concat
gulp.task('myScripts', function() {
return gulp.src(['public/js/one.js','public/js/two.js'], {base: 'public/js'})
.pipe(changed('public/dist/original/js'))
.pipe(gulp.dest('public/dist/original/js'))
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('public/dist/js'));
});
I am using gulp-changed to check for file changes, Here are the scenarios:
When running it for the first time, it takes both the miles and minifies them.
When only one file is changed after that, the concatenated file 'all.min.js' only contains the minified version of the changed file.
Can anyone please help me with how I can concat all the files even if only one file changes?
You should require gulp-remember and call it before concat. Gulp-remember works with gulp-changed and restores the previous changed files into the stream.
Have a look to this official recipe: Incremental rebuilding, including operating on full file sets
Related
I am using PhpStorm. I'm having problem with 2 file watchers.
.min files does not get updated on save in .less file.
I need first to compile Less to CSS and then to minify that same file.
.min files does not get updated on save in .less file
Use Output paths to refresh for that -- the IDE will check such path(s) looking for changes after current File Watcher finished running.
https://www.jetbrains.com/help/phpstorm/using-file-watchers.html#transpilerBehaviour
I need first to compile Less to CSS and then to minify that same file.
Use 2 file watchers: second one will run after the first one (so it needs to be located after/below the first one).
So I have:
First watcher will take main.scss and compile into main.css (using node-sass) and placed next to the source file.
Second will run after that on main.css and will make main.min.css using CSSO CSS Optimizer.
The File Watchers:
(please ignore disabled ones: this is quite old test project; it keeps all the stuff from the past experiments)
SCSS Watcher (using node-sass):
CSSO CSS Optimizer watcher:
Please note that I'm using custom scope: this is to limit these watchers to those specific folders only (it's test project after all; it has tons of experiments).
Here is the recording/proof that it works just fine: all 3 files are opened and get refreshed automatically by IDE: I only hit the Save button that triggers File Watchers.
A folder structure just in case:
I want to compile only the .less files that have changed in order to speed up my debug/coding workflow.
Here is my gulp task:
gulp.src('core/**/*.less')
.pipe(changed('core'))
.pipe(less().on('error', handleError))
.pipe(autoprefixer('last 2 version'))
.pipe(remember())
.pipe(concat('main.min.css'))
.pipe(gulp.dest('core'))
.on('end', resolve)
.on('error', reject);
I used gulp-changed and because it didn't work at first, I tried to use gulp-remember as well, but with no effect. The watch works, it compiles super fast, but it has no effect at all.
If I remove changed('core') and remember() it works, but it's slower (around 16 seconds).
gulp-changed is a poor fit for your use case, since it is meant to compare input files with output files on disk.
Say you have an input file core/foo/bar.less that you pipe through changed('dist'). What this does is to look for an output file dist/foo/bar.less. If the input file is newer than the output file, it is passed through. Otherwise it is filtered out.
That means using changed('core') cannot possibly work. It compares the input file core/foo/bar.less with the output file core/foo/bar.less. But they're the same file. That means the input file can never be newer than the output file and is never passed through.
There's another problem. You don't have one output file for each input file. All your .less files are compiled into one main.min.css file. While you can make this work using a custom comparator it doesn't work out of the box.
What you actually want is gulp-cached. Instead of comparing each input file with an output file on disk it compares each input file with a previous version of the same file that has been cached in memory.
var cached = require('gulp-cached');
gulp.task('css', function() {
return gulp.src('core/**/*.less')
.pipe(cached('less'))
.pipe(less())
.pipe(autoprefixer('last 2 version'))
.pipe(remember('less'))
.pipe(concat('main.min.css'))
.pipe(gulp.dest('core'));
});
I'm new to gulp and I tried to follow the documentation in https://www.npmjs.com/package/gulp-newer to understand how it works. However its not working as expected for the below task. I think I'm missing something obvious.
Here's the folder structure,
temp
file1.js
file2.js
new
file1.js
file3.js
change
<empty initially>
I want to compare temp folder with new folder and if there are any new files in new folder(which was not present in temp earlier) then move those files to change folder. This is just me trying to understand how gulp-newer works. Am I doing it right?
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(gulp.dest('change'))
});
However when I run this task it just copy all the files in temp folder to change folder. So after task run change folder has file1.js and file2.js. I'm expecting just file3.js to be present in change(since that's a new file). Correct me if my understanding with the approach is incorrect.
From gulp-newer:
Using newer with many:1 source:dest mappings Plugins like gulp-concat
take many source files and generate a single destination file. In this
case, the newer stream will pass through all source files if any one
of them is newer than the destination file. The newer plugin is
configured with the destination file path.
and the sample code:
var gulp = require('gulp');
var newer = require('gulp-newer');
var concat = require('gulp-concat');
// Concatenate all if any are newer
gulp.task('concat', function() {
// Add the newer pipe to pass through all sources if any are newer
return gulp.src('lib/*.js')
.pipe(newer('dist/all.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});
it seems that you need to pass in all the files already concatenated to newer. In your case:
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(concat('*.js'))
.pipe(gulp.dest('change'))
});
Also, since newer checks the files modified date make sure that the files are actually newer. I know it's obvious, but I'm usually stuck on "obvious" stuff.
May I also suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});
In gulp I want to deal with some files but I do not know all of the files I want to deal with at the time I write gulp.src([...]). I can only know some files at that time and other files I want to deal with depend on the known files dependencies. My question is is there a way that can add the source file in the middle of pipe? Pseudo code:
gulp.src([some files I already knew]).pipe(gp_tap(function(file){
// some actions;
// get file dependencies
// Here I want to add the dependencies as the source file
}))