Example usage:
Task: Using gulp-inject to inject js/**/*.js files into index.html.
Problem: If I watch for changes in the js/**/*.js glob, this would mean that I'm running the inject task each time any of the .js files' content is changed, which is unnecessary, since the paths don't change.
Question: How can I create a watcher that would only watch for addition/removal of the files in the glob?
Thanks!
You can give watch a callback function that gets the file object, including the type of event:
add - file was added to watch or created
change - file was changed
unlink - file was deleted
see https://www.npmjs.com/package/gulp-watch
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 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
}))
I am trying to load a file called styles.css which is located in
~/Content/css/styles.css
What I tried is adding it to the _Layout page
<link rel="stylesheet" href="~/Content/css/styles.css" />
This gives a 404 on that location.
I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.
Could someone be so kind to help me reference my own styles.css file?
Joe wrote in his answer:
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.
To elaborate on this:
In Gulp there are four APIs, being:
gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files
To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:
var gulp = require('gulp')
var paths = {
webroot: './wwwroot/',
cssContent: './Content/css/**/*.css'
};
paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';
gulp.task('build:ccs', function () { // Define a task called build.css
console.log('Building Cascading Style Sheets...')
gulp.src(paths.cssContent) // Look for files in the source.
// Do optional other stuff
.pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});
All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).
To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".
You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.
Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot
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