I have the following code:
gulp.task('watch:Feature', function() {
gulp.watch(['./js/Feature/**/*.ts', '!./js/Feature/.gulp-tsc-tmp*.ts'], function () { console.log("Test"); });
});
I've substituted my typescript build task for console.log("Test") and am copying a file with the name: .gulp-tsc-tmp-1151023-9976-e1a1h3.ts into the Feature directory, which causes "Test" to be output to the console.
I've tried all sorts of exclude patterns including specifying the exact filename I'm copying into the directory, none of which seem to work.
What would be the correct way of ignoring files with a particular prefix?
I encountered this a few weeks back and was informed that feature was removed, I didn't have time to establish if that was true but certainly none of my previously working 'ignores' were working on updated release.
The correct way to ignore files in a watch in gulp 4 is this:
gulp.watch('js/Feature/**/*.ts', {
ignored: 'js/Feature/.gulp-tsc-tmp*.ts'
}, function () {
console.log('Test');
});
See the documentation.
I was having this problem too, and solved it by removing "./" from the beginning of my paths:
gulp.task('watch:Feature', function() {
gulp.watch(['js/Feature/**/*.ts', '!js/Feature/.gulp-tsc-tmp*.ts'], function () { console.log("Test"); });
});
Related
do I understand this wrong or is something not right here?
I have this piece of code
gulp.task("minifyScripts", function () {
return gulp.src("assets/scripts/*.js")
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('assets/scripts/min'))
.pipe(rev.manifest())
.pipe(revDel())
.pipe(gulp.dest('assets/scripts'))
.pipe(livereload())
.pipe(browserSync.stream());
});
My understanding was that this should remove old .js file when one with new hash is created, but its not...
Do you have any idea? Thanks so much!
You need to specify either dest in the options, or base in the manifest options—unless you're writing everything to the root directory.
Try:
pipe(revDel({dest: "assets/scripts/min"})
Seems that rev-del has a number of users, including myself, who are unable to get the plug-in to delete the old static files after gulp-rev hashes them.
Switching over to gulp-rev-delete-original simply worked OOB.
In the OP's use case, the updated solution would be:
const revDel = require("gulp-rev-delete-original")
gulp.task("minifyScripts", function () {
return gulp.src("assets/scripts/*.js")
.pipe(uglify())
.pipe(rev())
.pipe(revDel()) // call just after rev()
.pipe(gulp.dest('assets/scripts/min'))
.pipe(rev.manifest())
//.pipe(revDel()) ==> move to just after rev()
.pipe(gulp.dest('assets/scripts'))
.pipe(livereload())
.pipe(browserSync.stream());
});
I'm trying to ignore a folder within a gulp task, but it doesn't seem to work.
Here are the different tests I have done: all without success: the files are copied into the destination folder.
gulp.task('dev', function () {
return gulp.src([
//sources
'./src/**/*',
// first test
'!src/*views/*',
// second test
'!src/**views/'
])
.pipe(cleanDest('./dev/'))
//destination
.pipe(gulp.dest('./dev/'));
});
Has anyone of you ever encountered the problem and managed to work around it / solve it?
Thank you in advance for your help
Assuming they are .js files the below works for me:
return gulp.src(['./src/!(*views)/*.js'])
this will ignore the folder views.
gulp.task('dev', function () {
return gulp.src(['./src/**/*', '!src/**/views'])
.pipe(cleanDest('./dev/'))
.pipe(gulp.dest('./dev/'));
});
Gulp (4.0) throws the error "Error: Invalid glob argument: undefined" when I attempt to gulp.src the path of a changed file obtained from gulp.watch. Both this:
gulp.task('watch', function() {
gulp.watch('./web/**/*.html')
.on('change', function(file) {
gulp.src(file.path)
.pipe(gulp.dest('./output'));
});
});
and this syntax variant:
gulp.task('watch', function() {
gulp.watch('./web/**/*.html', function(file) {
gulp.src(file.path)
.pipe(gulp.dest('./output'));
});
});
yield the same result.
Logging file.path before the gulp.src also outputs "undefined".
To reproduce:
npm install -g gulp#github:gulpjs/gulp#4.0
and create a gulpfile.js containing:
const gulp = require('gulp');
followed by either of the examples.
My understanding is that this is the way in which the changed file's path should be accessible as per the docs, so I'm not sure where I'm going wrong?
That documentation is all kinds of wrong. E.g it talks about gaze events, but gaze is no longer used to watch for file changes in gulp 4.0; it has been replaced by chokidar.
Concerning your problem the docs are wrong about the way you have to access the file path. The .on('change') callback function is not passed an event object, so there is no .path property.
Instead the file path is passed as a string, so your first example should look like this:
gulp.task('watch', function() {
gulp.watch('./web/**/*.html')
.on('change', function(file) {
gulp.src(file)
.pipe(gulp.dest('./output'));
});
});
The callback function in your second example doesn't receive a path at all. It's passed a done callback, in order to facilitate task execution via gulp.series() or gulp.parallel().
I'm using this Gulp Watch sample: https://github.com/floatdrop/gulp-watch/blob/master/docs/readme.md#starting-tasks-on-events.
var gulp = require('gulp');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
gulp.task('build', function () { console.log('Working!'); });
gulp.task('watch', function () {
watch('**/*.js', batch(function () {
gulp.start('build');
}));
});
When I run it on my Windows 8 machine, it only runs the first time I change a file:
C:\test>gulp watch
[08:40:21] Using gulpfile C:\test\gulpfile.js
[08:40:21] Starting 'watch'...
[08:40:21] Finished 'watch' after 2.69 ms
[08:40:31] Starting 'build'...
Working!
[08:40:31] Finished 'build' after 261 µs
Next time nothing happens. Why?
For me it was adding a "return" to the task:
gulp.task('styles', function(){
return gulp.src('css/styles.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'));
});
If you read the documentation closely, you see the following phrase:
You can pass plain callback, that will be called on every event or wrap it in gulp-batch to run it once
So, that's basically the deal with gulp-batch. To constantly watch it, just remove the batch call:
gulp.task('build', function (done) {
console.log('Working!');
done();
});
gulp.task('watch', function () {
watch('app/*.js', function () {
gulp.start('build');
});
});
(and add the 'done' callback to build to let Gulp know when you're finished).
Btw... I'm not sure, but I think gulp-watch is meant to not only watch files, but also directly returning a vinyl object. So actually using the built-in gulp.watch should have the same effect:
gulp.task('watch', function () {
gulp.watch('app/**/*.js', ['build']);
});
This appears to be known issue
I had the same problem and used the same as ddprrt. The difference was using directory glob (wildcard) as apposed to absolute path.
I changed this:
gulp.task('watch', function() {
gulp.watch('sass/shortcutcss/*.scss', ['sass'])
});
to this:
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['sass'])
});
This problem made me crazy for a weekend. I tried all:
Add done()-Event
Rename/Touch/Clear target CSS
Be more specific with the filepaths
But the (reason for this problem and) the solution was so easy that I felt pathetic after that:
Just update your nodejs installation, mine was 0.12.x! No wonder that this doesn't worked.
After that the watch event works again. Sometimes it goes wrong again, too. But in this cases just save your file a second time and it get recognized. (I think foundation/gulp watch checks for changes to fast and while your file get replaced with the new uploaded one)
Long story:
For me it did not work for long time. All seems to be set right but run only once.
But suddenly I started with parcel js on another project and same thing happened with their builtn watch. So I looked for the answer and I found out that problem was with my Vim settings.
Answer what helped me is this one from #acobster https://stackoverflow.com/a/55435197/2686510
In short:
Update .vimrc by adding set backupcopy=yes
I am having tried to read tutorials and browse other questions, but cannot find a good answer to how I can set up gulp so that I get javascript-files from (already installed) bower-components for development and for production.
First I tried a simple way. For development:
gulp.task('vendorScriptsDevelopment', function() {
return gulp.src(['bower_components/jquery/dist/jquery.js',
'bower_components/**/*.js',
'!bower_components/**/*.min.js'])
.pipe(filter('*.js'))
.pipe(concat('vendor-scripts.js'))
.pipe(gulp.dest('dev'))
});
And similar for production:
gulp.task('vendorScriptsProduction', function() {
return gulp.src(['bower_components/jquery/dist/jquery.min.js',
'bower_components/**/*.min.js'])
.pipe(filter('*.js'))
.pipe(concat('vendor-scripts.js'))
.pipe(gulp.dest('prod'))
});
I included jquery specifically first, since other plugins often depend on it.
But then I realize that some bower packages includes a lot of files, also various javascript-files that I do not want (I just want "the one" that typically also has a CDN-option (and are offered in two versions, normal js and minimized)).
One tutorial I have read uses the main-bower-files plugin for the development part, but then it goes on in the wrong direction and wants to make a minified version itself (as I understand, it is always best to use the packages included minified version, as that is optimized from the developers of the plugin).
How can I set up my two Gulp tasks so that they works as intended? Or am I forced to included all the files manually (like I included jquery manually in my examples)?
Ok, since nobody has replied, here is my attempt to answer my own question.
I created a function that generates an array of the filenames that I want. This uses main-bower-files and filters out the .js-files. If this is development, then that's it. If it is production, then I just change the file extension from .js to .min.js (and for safety checks if that file exists).
var concat = require('gulp-concat');
var mainBowerFiles = require('main-bower-files');
var fs = require('fs');
var vendorScripts = function (minified) {
var scripts = mainBowerFiles().filter(function (filename) {
return filename.match(/.+\.js$/)
});
if (minified) {
scripts = scripts.map(function (orgFilename) {
var minFilename = orgFilename.replace(/^(.+)\.js$/, '$1.min.js');
if (fs.existsSync(minFilename)) {
return minFilename
}
return orgFilename;
});
}
return scripts;
};
gulp.task('vendorScriptsDevelopment', function() {
return gulp.src(vendorScripts())
.pipe(concat('vendor-scripts.js'))
.pipe(gulp.dest('dev'))
});
gulp.task('vendorScriptsProduction', function() {
return gulp.src(vendorScripts(true))
.pipe(concat('vendor-scripts.js'))
.pipe(gulp.dest('dist'))
});
I should change my function to handle other assets too, like css.
If somebody has a better approach, I would be very glad for a suggestion!
Here is my solution for your problem enjoy:
Create a vendors.json file in your sources folder. Edit the file and make path to relevant files you want to include in the production folder. For example:
{
"js" : [
"lib/jquery/dist/jquery.js",
"lib/lodash/lodash.js",
"lib/angular/angular.js",
"lib/angular-sanitize/angular-sanitize.js",
"lib/angular-ui-router/release/angular-ui-router.js",
"lib/angular-ui-utils/ui-utils.js",
"lib/angular-bootstrap/ui-bootstrap-tpls.js",
"lib/chartjs/Chart.js",
"lib/pnotify/pnotify.core.js",
"lib/pnotify/pnotify.buttons.js",
"lib/angular-pnotify/src/angular-pnotify.js",
"lib/angular-prompt/dist/angular-prompt.js",
"lib/angular-mocks/angular-mocks.js"
],
"css" : [
"lib/bootstrap/dist/css/bootstrap.css",
"lib/bootstrap-rtl/dist/css/bootstrap-rtl.css",
"lib/bootstrap/dist/css/bootstrap-theme.css",
"lib/font-awesome/css/font-awesome.css",
"lib/pnotify/pnotify.core.css",
"lib/pnotify/pnotify.buttons.css"
],
"statics" : [
"lib/font-awesome/fonts/*"
]
}
Then in the gulpFile.js add this:
var sources = {
get 'vendor.js'(){
return getVendorSources().js;
},
get 'vendor.css'(){
return getVendorSources().css;
},
get 'vendor.statics'(){
return getVendorSources().statics;
}
};
function getVendorSources(){
return JSON.parse(fs.readFileSync('yourSourcesFolder/vendor.json', 'utf-8'));
}
gulp.task('vendor.css', function() {
return gulp.src(sources['vendor.css'])
.pipe(changed(paths.dist))
.pipe(gulp.dest(paths.dist));
});
and so on for the js and static files tasks.