I am struggling with a very strange issue with gulp build. I created a project using jhipster with angular 1. When I build the war for prod using mvn clean install -Pprod or just do gulp build, all my images files under content/images are copied properly to www/content/images. My HTML templates are minified and merged into 1 single app-f88bd0c8d7.js file under www/app folder. However, when I run the app and my index.html is opened, for few of the images I get 404 error even though those images are there in the war under content/images folder. The problem is with the name using which the images are being referred. For ex. my rev-manifest.json file under temp folder shows below entry - "fav-1.png": "fav-1-013b104b51.png", but this file is referred in my app-f88bd0c8d7.js as fav-1-013b104b51-57eab5e392.png, so if you notice its appending "-57eab5e392.png" extra. This happens only for few images(not same images, keeps on changing) every time I do gulp build.
I read quite a few forums on SO and went through open issues on git, but nowhere I see anyone facing this kind of issue. I tried below solutions but none worked:
1) Added a task for clearing gulp-cache as below and invoked it during gulp build -
var cache = require('gulp-cache');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['clearcache','copy', 'inject:vendor', 'ngconstant:prod', 'languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
2)Tried commenting out below lines :
a) .pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
b).pipe(rev())
c)gulp.watch(config.app + 'content/images/**', ['images']);
My jhipster version is 3.4.2 and gulp version is 3.9.1
Does anyone know why this might be happening?
Posting my comment as answer : I tried updating the git-rev version to 7.1.2 from 7.0.0 but it has same issue. So I just commented out .pipe(rev()) and it worked. No hashing of files happening now. Tried it last time as well, not sure why it didnt work. Anyways, it's working now. Will post the same as answer in case someone finds it useful.
Related
I have the following setup:
// watch for changes
gulp.task('watch', function () {
gulp.watch('./assets/**/*.less', ['compile-less']);
});
gulp.task("compile-less", () => {
return gulp.src('./assets/build-packages/*.less')
.pipe($.less({
paths: [ $.path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(OutputPath)); // ./dist/styles/
});
So basically every time a developer changes something in a less file it runs the task 'compile-less'. The task 'compile-less' builds our package less files (including all the #imports). The first change in a random less file works, all the less files are being build. The second time it runs the task but my generated dist folder isn't updated when I change something to a less file that is imported. I'm wondering if the combination of the watch task and the compiling task somehow caches files. Because if I run the compile-less task manually it works everytime.
Does anyone had the same experience?
gulp-less version 4.0.0 has a strange caching issue.
Install gulp-less#3.5.0 and will solve the issue.
This will be fixed. Check out https://github.com/stevelacy/gulp-less/issues/283#ref-issue-306992692
I am working on a simple gulpfile and noticed an issue with gulp.watch method. If I add a new file to an empty directory gulp.watch will not fire. However if there is at least one file in the directory all change events are detected. I could obviously restart my "watch" task every time there is an empty directory added with a new file or I add a file to an existing empty directory but that seems counter intuitive to the purpose of gulp.watch method.
To be clear watch does detect files that are added and deleted only after at least one file exists in that directory.
My question is wether or not this is a bug exclusive to me or if more people have experienced this. Also does anyone know of a current work around?
Here is my gulp task:
gulp.task('watch', () => {
var watcher = gulp.watch('src/styles/scss/*.scss', {cwd: './'}, ['styles']);
watcher.on('change', (event) => {
console.log(`File ${event.path} was ${event.type}, running tasks...`);
});
Current gulp version: 3.9.1
P.S. I also know this may be a limitation of the technology I just don't what to report a bug to the gulp team that isn't a bug.
Thanks!
Awesome! Thank you, Mark for getting me in the right direction. It is not a bug there is just a specific way you have to do it.
gulp.task('watch', () => {
var watcher = gulp.watch(['src/styles/scss/*.scss', 'src/styles/*],{cwd: './'}, ['styles']);
watcher.on('change', (event) => {
console.log(`File ${event.path} was ${event.type}, running tasks...`);
});
The trick is watching your parent directory for any changes. This will now detect file changes as well as added and deleted files in empty subdirectories.
So I have a task like so:
gulp.task('scripts', function() {
return gulp.src(['app/scripts/app.js', 'app/scripts/controllers/**/*.js', 'app/scripts/services/**/*.js', 'app/scripts/directives/**/*.js', 'app/scripts/libs/**/*.js' ])
.pipe(concat('external.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('app/scripts'))
.pipe(gulp.dest('dist/scripts'))
});
and I have a watch task:
gulp.task('watch', ['sass-dev', 'scripts'], function() {
gulp.watch('app/style/sass/**/*.scss', ['sass-dev']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
});
All works well, except whenever I save a JS file, "scripts" runs multiple times. I'm assuming the problem lies with the gulp.src and it looking at multiple files, but I'm not sure.
This is no big deal (to me), but sometimes I'll swap over to the command line and the task is running infinitely. It just keeps getting called over and over again.
If you haven't already guessed, I'm running Angular, which is why app.js is first and I have ngAnnotate.
Can someone shed some light on why the script runs continuously sometimes?
I guess the problem is .pipe(gulp.dest('app/scripts')). You're doing some stuff (uglify and angular stuff) with your scripts and then you place them in the same folder you're watching. So the scripts task will launch again and again and again.
You should remove this line and only place your distribution scripts in your distribution folder and leave your app files untouched.
I have a task :
gulp.task('styles', ['cleanup'], function () {
'use strict';
log('Compiling Less files to :' + config.temp);
return gulp
.src(config.less)
.pipe(less())
.pipe(autoprefixer({browsers: ['last 2 versions', '> 5%']}))
.pipe(gulp.dest(config.temp));
});
This tasks works like it should when I call it manually. It deletes the files in config.temp (not shown in code snippet) and recompiles the less to css and places it again in config.temp directory.
The problem is when I try to run this task inside gulp.watch :
gulp.task('watch', function() {
gulp.watch(config.less, ['styles']);
});
The task doens't work anymore. I can see gulp picking up changes I make in my less files, I see the log output, there are no errors, yet still the task hasn't really happend. My css output remains the same.
Another indication that the tasks aren't really executed, is the time that gulp spend; when I do it manually it takes longer :
then when the gulp watch runs the same task :
I have been following a tutorial that does the exact same thing, and I have some example files that also use gulp.watch and work.
I have seen some mentioning of gulp-watch but I'm not sure that's the same as gulp.watch?
Hope it's some obvious mistake someone can point out to me.
Some things to try:
Try the debugging i mentioned in the comments
Add this in the styles task, right after you pipe in the source code.
.pipe($.plumber()) // exit gracefully if something fails after this
also, make sure you check your version of the gulp.
I wish I could just delete this question because apparently there is nothing wrong: Webstorm was just too bloody slow in refreshing itself, so I always thought the .css file hadn't changed. I just needed to wait approx 45 seconds. Sorry for wasting internet space!
I have the following code fragment in my gulpfile.
gulp.task('static', function() {
return gulp.src(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'])
.pipe(gulp.dest(outputDir + '/'))
});
gulp.task('watch', function() {
gulp.watch(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'], ['static']);
});
gulp.task('dev', ['static']);
gulp.task('default', ['watch', 'dev']);
If I run gulp dev, gulp watch or gulp static, everything works fine. However, if I run just gulp (default), it does the static task 5 times. Can anyone help me out with why this is happening?
P.S. The paths passed to watch are such because if I don't disclude the directories as separate paths, it seems to be copying the empty directories js and scss for some reason.
Probably because you're not returning the tasks, and you need them to be asyc.
See this: Gulp.js task, return on src?
and the docs (also linked in SO post above) https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
Also, the dev task looks redundant in its current form - you may as well use the task static directly, unless you plan to bundle in more tasks with dev