I need to minimize the number of gulp's command from my gulpfile.
This is my JS folders
js/
templates/
t-01/
t-02/
[...]
t-xxx/
My gulp task for JS (with livereload)
gulp.task('da-js', function() {
gulp.src([
'js/templates/**/*.js',
'!js/templates/**/*.min.js'
])
.pipe(concat('app.min.js'))
.pipe(gulp.dest('js/templates'))
.pipe(livereload());
});
This task is global the destination folder is templates but I want to detect the current folder of js files like is :
I'm changing js in /templates/t-01/
gulp.watch is launching
app.min.js is generating only in this folder t-01
I know the gulp.dest is not correct to target current folder but I don't know how to do this.
Thank you for your help :)
You can use gulp's watch method to monitor a folder with JS files for updates and run a series of tasks in response to some change.
gulp.task('watch-files', function() {
gulp.watch('js/templates/**/*.js', ['da-js']);
});
Here we're watching over all the JS files in templates and all it's sub-folders and running your file concatenation task (da-js) for every update. Now that we're executing the same task, your app.min.js folder will be generated in your templates folder even when you change templates/t-01/some.js.
With the watch-files task defined in your gulpfile.js, you can simply run gulp watch-files command which will start monitoring your files.
Related
I have a project with a certain folder structure and an other project which should be basically the same only some files are different.
I would like to write a gulp-task (or tasks) which are copying the first projects folder structure, but only create symlinks for the files, and don't overwrite files already in the other project.
I found out that I can create symlinks with gulp and vinyl-fs.
I tried to create a two step task. First, I tried to copy the folder structure, but I don't know how can I tell gulp that I only care about the folder structure.
Then second, I wanted to create a symlink task that is creating the symlinks in the correct directory.
Maybe, I could create it with only vinyl-fs's symlinks using a function parameter, but I can't find out how.
It would seem you can do this to copy only folders (exclude *.*):
gulp
.src(['base/path/**/*', '!base/path/**/*.*'])
.pipe(gulp.dest('target'));
Assuming all your files have some kind of extension (e.g. *.jpg).
For the symlinks, doesn't the following work?:
var vfs = require('vinyl-fs');
...
vfs
.src('base/path/**/*', { followSymlinks: false, nodir: true })
.pipe(vfs.symlink('target'));
...
I have a gulp script that watches for code changes in all javascript files. It looks like this:
gulp.watch(['./**/*.jsx', './**/*.js'], ['build:react']);
So, it watches for all .js and .jsx files from root directory, but I want to ignore node_modules directory.
How can I do that ?
You ca use gulp unwatch This removes the folder specified from your pipe. However, it's generally a good idea to have a source folder that gulp watches instead of the project root folder (then the .git directory and all sorts will be caught up in your task.
I am using Gulp to build a deployable build for an application. I would like to cache-bust all of my .js and .css files so that when a new build is deployed, users will need to retrieve the new "cache-busted" files. For example, if an app.js file is stored in the browser's cache, I would like to have the ref to app.js in my index.html look something like this:
<script src="app/js/app.js?v=1.2"></script>
and so on for all relevant files I would like to cache bust.
Some other questions related to this problem I have:
1) How can I tell that these files are actually getting cache busted properly?
2) Is there a better way to approach this?
Here is what I am trying so far:
//compile index.html, app, vendor
gulp.task('compile-dist', function(){
var revAll = new RevAll();
gulp.src('../../backend-angular-seed/app/**')
.pipe(gulp.dest('../dist/app'));
gulp.src('../../backend-angular-seed/vendor/**')
.pipe(gulp.dest('../dist/vendor'));
gulp.src('../index.html')
.pipe(gulp.dest('../dist/'));
})
This code takes all of the code from my app/ directory (which is a result of my compiled code from my master/ directory) and builds a dist/ directory with all of my js, css, and vendor files.
After this build I have a dist/ directory that looks like this:
/dist
/css
|_app.css
/img
/js
|_ app.js
|_ base.js
/vendor
index.html
I have tried using a few different methods on modifying this dist directory to effectively have it bust the cache. I tried using gulp-cachebust as well as gulp-rev-all, but I believe both of these tools are a bit overkill for what I am trying to do.
Ideally, through Gulp, I would like to go into the index.html file made from the Gulp build, and modify all of my script tags to append the query string of "?v=1.0" on the end of all files I would like to cache bust per deploy build.
Any answers/suggestions would be greatly appreciated. Thanks so much!!!
If appending query string is all you want then i recommend using gulp-cache-bust.
var cachebust = require('gulp-cache-bust');
gulp.src('./dist/index.html')
.pipe(cachebust({
type: 'timestamp'
}))
.pipe(gulp.dest('./dist'));
Here is the turorial for it: https://www.npmjs.com/package/gulp-cache-bust
I have been using AngularJS for around 6 months now and have recently started using Yeoman and Grunt to help with my workflow.
Is there a way to have grunt update my index.html file for files/scripts that I add manually into my app folder?
I know that if I use the command:
$ yo angular:service New-Service
then a boilerplate file will be created and my index.html file will be updated to reference the new file.
Is there a way to have this functionality for files that I do not add with the syntax shown above?
Thanks for the help.
You are searching a linker. There are several grunt plugins to do this job :
- grunt-asset-linker
- grunt-sails-linker
Here is what you have to do :
Add a grunt task with (grunt-contrib-watch) to watch folders where files are added
Add a task with (E.g : grunt-asset-linker) to link all files from one or many folder to your index.html
I am using File Watchers within Webstorm for calling a batch file.
This batch file contains an Ant call command like this:
call ant "clean" "debug" "compress" -f C:\Users\cm\workspace2\Games\jsfiles\PokerGame\build\build.xml
File Watchers triggers every time I save changed js files and does not stop it calls and for ever.
The picture shows my configuration for File Watcher in Webstorm.
What am I doing wrong?
just a supposition: the IDE sees the .js files generated by ant (as a result of 'compress' target running) and, as it watches .js files, runs the watcher again and again... Try excluding the directory where your minified files are created from watcher scope - create a new scope (Settings/scopes) with this folder excluded and then set this scope to your file watcher