I've just downloaded the last release of semantic UI, everything seems to work fine, but when I launch
gulp watch
and try to change a file, here what happen:
[gulp] Modified: src/site/globals/site.variables
And nothing happen ( no rebuild ). What could the problem be?
I had the same issue. The problem is that there's a regex which creates the path to the proper files to modify and it fails.
What helped me:
Go to tasks/config/project/tasks.js
Replace theme: /.*\/themes\/.*?(?=\/)/mg to with theme: /.*\\themes\\.*?(?=\\)/mg
Run gulp watch again
Related
I am working with gulp pug, and I make a watch task for gulp, It work fine when I edit/update the file but it does not work when I create a new file. what is the problem here? and how can I fix it?
The src can not be an absolute path if you want Gulp watch to detect changes. You can make it work by defining a "Current Working Directory" (cwd)
Change:
gulp.watch('./src/**/*', ['pug']);
to:
gulp.watch('**/*', {cwd: ./src/}, ['pug']);
and it should work
Starting my Mean.js application using gulp prod is overwriting my changes to production.js. I edit the file, save it, commit it, whatever, and when I run gulp prod it immediately reverts to the state it was before I edited, linting errors and all. This is config/assets/production.js, which as far as I know is a source file, not something I'd expect to be generated.
I've searched the docs and the code to try to figure out what's happening, but I'm not getting it. Any hints?
This had been due to the 'wiredep' task overwriting the assets based on bower.json.
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 a gulp task that performs some pretty common tasks - it runs jshint to validate my code, then concats and minimizes the files and outputs them into single .min.js files.
The task (appears) to execute flawlessly when I run it manually. But the second I try to use it in a $gulp.watch it no longer outputs my file (it still executes and executes jshint though).
The code in my task:
gulp.src(path.join(workingPath, folder, '/*.js'))
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail')) //stop build if errors found
.on('error', function() {
console.log("Please review and correct jshint errors.");
this.end();
})
.pipe(order([ //order files before concat - ensure module definitions are first
"*.module.js",
"*.js"
]))
.pipe(concat(filename+'.js'))
.pipe(gulp.dest(destinationPath)) //full combined version
.pipe(uglify())
.pipe(rename(filename+'.min.js'))
.pipe(gulp.dest(destinationPath)) //minified combined version
.on('error',function() {
console.log("An error occurred during Gulp processing.");
this.end();
});
My gulp watch (the task is named 'components'):
gulp.watch(componentsBasePath+"/**/*.js",['components']);
One thing that I've noticed though is at the end of the manual run I see "Process finished with exit code..". And if I kill my gulp.watch it outputs "Process finished with exit code.." - then it DOES creates the output files!
My goal is to have my 'components' task create those output files every time it is triggered by the watch - not just when I kill the watch.
Thank you!
Cliff
Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things.
gulp watchers act on file save.
jetbrains will not auto update the project files (as you have found out it uses a cache).
To get around this problem i created a macro called saveSync which does the following actions:
Save all
Synchronize
Synchronize
Synchronize
Why did i synchronize 3 times? Because gulp takes a few seconds to finish tasks (compiling, etc) and if you update before they finish obviously the project view doesn't get update properly. I haven't figured out a way to insert a time delay into the macro itself.
After i created the macro, i just rebound ctrl + s from save all to the macro, and it worked.
If there is a 'cleaner' way of doing this i have yet to discover it.
Ran this by someone else and he found the cause of the issue. Though - it's not Gulp related at all it turns out.
The IDE I was using updated the folder and file structure instantly when I manually ran my 'components' task, however it did not do the same when I ran the gulp.watch task. I am happy to report though that the files were being created successfully, they just never appeared in the IDE until I killed the task.
This is a bit of a weird one:
I've got a gulp task that looks like this:
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [cleancss]
}))
.pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
.pipe(gulp.dest(paths.public + 'css/dist'));
});
I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.
Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.
Does anyone have any insight as to why this would be?
FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat
Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?
Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).