I have the following code,
http://paste.ubuntu.com/6824071/
but when I run 'gulp' in cli it just runs the tasks and quits. It dosen't stay to watch the files and recompile.
Ezras-MacBook-Air:no1fitness-sandbox Ezra$ gulp
[gulp] Using file /www/no1fitness-sandbox/gulpfile.js
[gulp] Working directory changed to /www/no1fitness-sandbox
[gulp] Running 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[gulp] Running 'styles'...
[gulp] Finished 'default' in 8.2 ms
[gulp] Finished 'styles' in 1.85 s
Ezras-MacBook-Air:no1fitness-sandbox Ezra$
The only way I can make it do it is by removing the task around the gulp.watch function.
is this right? Are there better ways (that work)?
Then theres the warning about gulp.run, which I'm confused about as their own docs still seem to use it.
You aren't calling the watch task — you are running the default task:
[gulp] Running 'default'...
Run gulp watch to run your watch task.
I know that the question was answered right, but this post comes from Google while I was searching for my problem and the solution in my case is:
npm install gulp-watch
Hope this saves someone else time ^^
Another cause could be that the directory to watch does not contains any file. In that case 'gulp watch' stops immediately.
Related
I have annoying issue with sass plugin. I use yeoman webapp geneator with default configuration. When I want to build production files (gulp command) I get sass error "File to import not found or unreadable [...]". It works only at first running gulp command – dist folder build properly. But when I want to run gulp command again I keep receiving this error (I have to restart computer to make it works again – at first run :) ). On the other hand, running "gulp serve" (live preview) command gets this same error only at fresh start – when I modify some .scss, files compile properly.
This is the main SCSS file:
// bower:scss
#import "bower_components/slick-carousel/slick/slick.scss";
// endbower
#import '_reset', '_fontello', '_variables', '_helpers', '_basic',
'_widerScreens', '_carousel';
Yeoman webapp generator v.3.0.1
I found this solution. Try to reproduce.
https://garystanton.co.uk/gulp-sass-file-to-import-not-found-or-unreadable/
I am using the MeanJS (https://github.com/meanjs/mean) framework, running on Heroku. When I try to run the application I get errors like:
Error: Cannot find module 'eslint-config-airbnb/legacy'
I am running in production mode (NODE_ENV=production).
The question I have is, it seems like gulpfile.js (when running the task prod) calls the task lint which calls the task eslint. But when I look at the packages.json file, I see that eslint-config-airbnb is only included in the devDependancies (and not dependancies). Now I tired to add it to dependancies, but I still get the same error about the missing module.
I'm new to MEAN.js, so I appreciate any help.
I am trying to figure out how to watch SCSS files for changes and then run task (gulp-ruby-sass) only for those that changed(added,removed) and their dependencies (#import).
My watch task code is:
gulp.task('sass-watch', function(){
gulp.watch('dev/scss/*.scss', ['sass']);
});
My "sass" task code is:
gulp.task('sass', function(event) {
return sass('dev/scss/*.scss')
.pipe(changed('dist/css'))
.on('error', sass.logError)
.pipe(gulp.dest('dist/css'));
});
Sice sass take all files in folder anyway, this cannot work as I want to, but I noticed interesting thing. In my command-line I get following logs, when "sass-watch" is triggered by saving style2.scss file.
[13:38:01] Using gulpfile C:\1HLAVNI\Lukas\Webdesign\lukasradek\gulpfile.js
[13:38:01] Starting 'sass-watch'...
[13:38:01] Finished 'sass-watch' after 42 ms
[13:38:03] Starting 'sass'...
[13:38:03] write ./\style_combined.css
[13:38:03] write ./\style2.css
[13:38:03] Finished 'sass' after 416 ms
Something logs write style_combined.css and style2.css which is exactly how the dependencies are. (styl2.scss is imported to style_combined.scss). So this means, that something knows how the dependencies are set. Problem is, that I don't know what is that something. I cannot get that info elsewhere, only in final log. If I can get that info somewhere in code, I would be able to use for triggering the task only for changed files and dependencies.
Any idea, what might emit those logs?
I tried to strip my code to bare minimum and the logs are still present even when I remove the content of "sass" task. The logs disappeared after I removed ['sass'] trigger from gulp.watch.
The Setup:
Using scss-lint plugin for IntelliJ-based IDEs (PHPStorm)
http://plugins.jetbrains.com/plugin/7530?pr=phpStorm
A gulp-compass task, part of a larger Gulp build process, that watches my sass (scss) dir.
https://www.npmjs.com/package/gulp-compass
NOTE:
OS: Windows 8
both tools work as expected.
The Situation:
With the scss-lint inspection active, any kind of typing activity in the editor (including simply typing a whitespace) triggers the gulp-compass task, and the terminal for said task returns 'file not found' errors along the following line:
[10:53:34] Starting 'dev-compass'...
[10:53:34] Finished 'dev-compass' after 3.58 ms
[10:53:36] File not found: E:/projects/xf/src/sass/blog_scsslint_tmp8349313806557714816.scss
[10:53:36]
[10:53:36] { [Error: Compass failed]
message: 'Compass failed',
showStack: false,
showProperties: true,
plugin: 'gulp-compass',
__safety: { toString: [Function] } }
[BS] 1 file changed (blog.css)
[10:53:46] Starting 'dev-compass'...
[10:53:46] Finished 'dev-compass' after 15 ms
write src/styles.group/blog.css
[BS] 1 file changed (blog.css)
Note: this 'error' doesn't prevent the task to perform; when I make actual changes to the .scss source files, the .css are generated properly.
Apparently, either SCSS Lint itself and/or the PHPStorm plugin generate temporary files when the inspection occurs, and promptly removes them -- presumably when the inspection finishes.
As it does so in the same directory that's being watched by the gulp-compass task... These two end up playing NYSMNYD (now you see me, now you don't).
I was hoping I could either:
set my SCSS Lint configuration file to force a different path for the temporary files, or,
set my gulp-compass task to ignore files based on a pattern such as *scsslint_tmp*.scss
But so far, I haven't found any way to do either of these.
I suppose it could be seen as just a 'cosmetic' error, since both tools do produce the desired outputs, but it results in unnecessary processing, and by filling my terminal with 'bogus' errors just make it more confusing to spot the genuine ones.
Any ideas?
Is there anybody who can tell me how to get grunt tasks load faster.
I really want to reduce the loading time, because most tasks require 1 second to load.
Especially for 'watch' task. when I am watching for changes, I really want to compile sass much faster.
Any ideas?
Thanx
You are really looking for this: jit-grunt.
Instead of loading all tasks every time, jit-grunt will only load those that are necessary.
Had the same problem as the OP: grunt watch was very slow for compiling .less files and liveReload so here's what I did:
install time-grunt to show execution times for each task:
$ npm install --save-dev time-grunt
and then place this line right after module-exports:
module.exports = function(grunt) {
require('time-grunt')(grunt);
After running grunt you will notice which tasks took longer than others. In my case it was loading all dependencies on every file change, so I found this solution:
install jit-grunt to load dependencies on demand instead of loading all of them each time grunt performs a task.
$ npm install jit-grunt --save-dev
and replace the initial loader in the gruntfile
require('load-grunt-tasks')(grunt);
with
require('jit-grunt')(grunt);
This saved my liveReload time for .css updates from ~1600ms to ~250ms.
PS: #curist suggested jit-grunt as well but I thought that more details might help anyone.
If your grunt is in a Vagrant virtualbox, you can synchronize via nfs, which is a bit faster than the default sharing. (but still way slower than a native filesystem)
In your Vagrantfile:
config.vm.synced_folder ".", "/vagrant", type: "nfs"
On my machine, time for grunt to load tasks (with ssd):
native: ~1s
nfs: ~4s
default Vagrant sharing: ~16s
Same problem here, after changed and execute task all modules was reload.
But i found a very good solution on github
(https://github.com/steida/grunt-este-watch)
What's wrong with official grunt-contrib-watch?
It's slow and buggy, because it uses combination fs.fileWatch and fs.watch, for historical reason. From Node 0.9.2+, fs.watch is ok.
What to do?
install grunt-este-watch
npm install grunt-este-watch --save-dev
change contrib watch
grunt.loadNpmTasks('grunt-contrib-watch');
to este watch
grunt.loadNpmTasks('grunt-este-watch');
change task
watch: {
javascript: {
files: 'src/js/**/*',
tasks: ['uglify']
}
}
to
esteWatch: {
options: {
dirs: ['../src/**/*']
},
'js': function(filepath) { return 'uglify' }
}
It sounds like your computer is the problem here, you will not have many options but to upgrade.
The only thing I can think of is concurrent tasks, if you can run the tasks concurrent you might shave some time off.
You could use grunt-concurrent as said on the repo:
Running slow tasks like Coffee and Sass concurrently can potentially improve your build time significantly. This task is also useful if you need to run multiple blocking tasks like nodemon and watch at once, as seen in the example config.
You can also load the tasks only when needed with this trick.