I've installed nodejs and gulp to auto compile the bootstrap less file (v 3.3.5) with gulp-watch-less module.
Everything is working fine expect one thing: I have to stop and start gulp to regenerate bootstrap.css.
For information, Gulp is detecting that a .less file included in bootstrap.less is modified, I have the following message:
[23:14:40] Starting 'default'...
[23:14:42] Finished 'default' after 2.04 s
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw bootstrap.less was changed:by:import
[23:16:42] LESS saw bootstrap.less was changed:by:import
But when I open the bootstrap.css file i don’t see the changes until I stop and start gulp again.
Here is the content of my gulpfile.js:
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
gulp.task('default', function () {
return gulp.src('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less')
.pipe(watchLess('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less'))
.pipe(less())
.pipe(gulp.dest('./../../../../drupal8/sandbox/felicity/themes/octogone/css'));
});
This code is from gulp-watch-less page
Can some one explain me why the bootstrap.css is not auto-re-generated?
I've solved the problem by using gulp-watch-less2
Gulp-watch-less wasn't compatible with gulp 3.9
Related
I need some help.
I'm looking for a way to generate (or update if the file already exists) a .css file that is a conversion by an .scss file. All of this when compiling.
Explaining this in a better way :
I'm writing some code, everything is ok and I decide to save. Perfect. ctrl+s and the app run perfectly. Nice. Now I've added a style.scss file somewhere (it doesn't really matter the path). How do I "tell" to the compiler that everytime he compile he also has to 'take' this .scss file, convert it in a .css file, and put it in a specific path?
Well, I found a way to do what I needed to do.
I've created my gulpfile.js in this way :
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('styles', function () {
gulp.src('src/app/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['styles']);
});
And added this command to package.json :
"try": "gulp watch && ng s"
the problem is that if in the cli I run the command npm run try it will never start my application, because the watch is an endless stream.
How can I have the watch and the app running both at the same time?
*Edit
Found the solution using concurrently
I have run into a road block with a new team I am working with that supports a node app. The app is launched via Gulp, and the setup is such that there is a "core" NPM module that defines a bunch of gulp tasks and a "server", and our app simply installs this package and our code is copied in as a "plugin" to the server.
In our gulpfile.js, we have something like:
var gulp = require('gulp');
var workflow = require('base-workflow');
workflow.use({ gulp: gulp });
gulp.task('default'), ['base:default']);
...more stuff
Where base:default is pulled in and a couple of Hapi servers are ultimately started (one as a "web" app, one as the "rest" proxy app to a real Java-based REST services). What I would like to do is setup node-inpector so that I can troubleshoot the startup of the app because I have found that the latest versions of their base packages are not Mac-compatible.
What I have tried is to install gulp-node-inspector with the following changes:
var gulp = require('gulp');
var nodeInspector = require('gulp-node-inspector');
var workflow = require('base-workflow');
workflow.use({ gulp: gulp });
gulp.task('default'), ['base:default']);
gulp.task('debug', ['default'], function() { gulp.src([]).pipe(nodeInspector({debugBrk: true})); });
...more stuff
and also:
var gulp = require('gulp');
var nodeInspector = require('gulp-node-inspector');
var workflow = require('base-workflow');
workflow.use({ gulp: gulp });
gulp.task('default'), ['base:default']);
gulp.task('debug', function() { gulp.src(['default']).pipe(nodeInspector({debugBrk: true})); });
...more stuff
but neither of those works. Part of this is most likely my lack of understanding of Gulp. Does anyone know how I can debug this app?
I spent a fair bit of time googling and trying the various solutions out there; in the end the one that worked for me was the accepted answer found on this page:
How to debug gulpfile.js
This was the only one that allowed me to actually hit my "debugger" command in my gulp task.
I should also note that I had to completely uninstall and reinstall "node-inspector"; there was a version problem and when I was on the verge of solving it I was getting some "cannot find module" error because the version of node-inspector was causing it to point to the wrong folder. Once I uninstalled and reinstalled (via npm) then it worked. In my case I'm on a Windows machine and the command that worked looked like the following:
node-debug C:\myPathWhereGulpfileDotJsExists\node_modules\gulp\bin\gulp.js --gulpfile C:\myPathWhereGulpfileDotJsExists\gulpfile.js myTestTaskContainingDebuggerCommand
Maby this solution help you
node --inspect --debug-brk ./node_modules/gulp fonts
The best way to do this now is to add a debugger; to the place in the file you would like to add a breakpoint to, or set it manually once the debugger has started with setBreakpoint('gulpFile.js', 1)
Then simply
node inspect --inspect-brk $(which gulp) taskName
c
More information about debugging with node here
I've started working with Gulp and the problem I'm having is getting gulp-chug to work properly.
I've followed everything in the documentation, telling my gulpfile to watch all gulpfiles within certain directories, whereas it only watches one file.
This is the code I have used following the documentation...
var gulp = require('gulp');
var chug = require('gulp-chug');
gulp.task('default', function () {
gulp.src('**/task_runner/gulpfile.js')
.pipe(chug());
});
I even tried to see if it makes a difference if I put the filepath in an array...
...
gulp.src(
[ '**/task_runner/gulpfile.js' ]
)
...
I also tried this (and a version without the array in gulp.src())...
...
gulp.src(
[ 'Project_01/task_runner/gulpfile.js', 'Project_02/task_runner/gulpfile.js' ]
)
...
...and it still does the same thing.
My file structure looks like this,
*root*
node_modules
gulpfile.js
package.json
Project_01
css
scss
task_runner
Project_02
css
scss
task_runner
All the gulpfiles work when running them individually, but I want them all to run at the same time within one cmd window with gulp-chug.
This is what my cmd looks like, which is showing that it's only watching Project_02,
C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gulp>gulp
[14:19:40] Using gulpfile ~\Desktop\UniServer\www\Practice\gulp\gulpfile.js
[14:19:40] Starting 'default'...
[14:19:40] Finished 'default' after 6.37 ms
[gulp-chug] File is a buffer. Need to write buffer to temp file...
[gulp-chug] Writing buffer to Project_02\task_runner\gulpfile.tmp.1411996780120.
js...
[gulp-chug] Spawning process C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gul
p\Project_02\task_runner\node_modules\gulp\bin\gulp.js with args C:\Users\Waheed
J\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\node_modules\gulp\b
in\gulp.js --gulpfile gulpfile.tmp.1411996780120.js default from directory C:\Us
ers\WaheedJ\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Usi
ng gulpfile ~\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\gulpfil
e.tmp.1411996780120.js
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Sta
rting 'watch'...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:43] Fin
ished 'watch' after 18 ms
[14:19:43] Starting 'default'...
[14:19:43] Finished 'default' after 7.13 µs
What can I do to fix this?
I have the same thing happening. For now i employed this workaround :
gulp.task('default', ['one-gulpfile', 'another-gulpfile'], function () {});
gulp.task('one-gulpfile', function () { return gulp.src('./project-one/gulpfile.js').pipe(chug()); });
gulp.task('another-gulpfile', function () { return gulp.src('./project-another/gulpfile.js').pipe(chug()); });
Basically an empty default task, with dependencies on hard coded tasks that each, run one gulp file.
Of course not dynamic, and needs maintenance, but I got it going which is what i needed most at this point in time. I hope to see chug mature a bit more.
I'm using Gulp and Browserify to package my Javascript into 2 separate bundles: application.js and vendor.js.
How do I bundle the vendor package if my vendor libraries are installed with Bower?
In my gulpfile, I'm using the following modules:
var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");
Assuming that I have only the Phaser framework installed with bower (for this example), my Gulp task to create the application package looks like this:
gulp.task("scripts-app", function () {
browserify("./app/javascripts/index.js")
.external("phaser")
.pipe(source("application.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Meanwhile, the vendor task looks like this:
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("phaser")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
When I run this Gulp task, I get an error that states Error: Cannot find module 'phaser' from and then all the directories it search through (none of which are the bower_components directory).
Any ideas about how to package these up successfully are greatly appreciated. Thanks!
Answered my own question:
When using require in the Gulp task, you need to supply a path to a file, not just a name.
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("./bower_components/phaser/phaser.js")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Notice that require("phaser") became require("./bower_components/phaser/phaser.js").
Doing this works, although the bundle takes forever to build (around 20 seconds). You're probably better of just loading giant libraries/frameworks directly into your app through a <script> tag and then using Browserify Shim.
This let's you require() (in the NodeJS/Browserify sense) global variables (documentation).
Seems like you figured out how to require the bower file. Hopefully you'll only have to bundle it once initially, and not every build. Including the library via a script tag isn't a bad idea. Another technique I'm using is to use scriptjs (a polyfill would work too), to async load whatever vender libraries I need, but make sure to include any/all require's after the script loads. For example, your index.js could be like:
$script.('/assets/vendor', function() {
var phaser = require('phaser');
//rest of code
});
It's especially nice for loading cdn files or having the ability to defer loading certain libraries that aren't necessarily used in the core app by every user, or loading libraries after client-side routing.
I have a simple build step of my project where I mainly concatenate several files. The code looks like this:
var gulp = require('gulp');
var p = require('gulp-load-plugins')();
var srcDir = 'src/';
var src=[/*some files here*/];
var header='',footer='';
gulp.task('build',function(){
gulp.src(src,{cwd:srcDir})
.pipe(p.concat('sdk.js'))
.pipe(p.header(header))
.pipe(p.footer(footer))
.pipe(p.jshint())
.pipe(gulp.dest('dist/'));
});
gulp.task('watch',function(){
gulp.watch('src/**/*.js',['build']);
});
gulp.task('default',['build','watch']);
The first build task works as expected, with execution time about 550ms:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 541 ms
However, when I change something in the src folder, the build task takes very little time, although I don't use any caching:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 2.37 ms
What's more, the task has no effect - the dist directory doesn't change. I noticed, however, that the files update when I kill gulp and run it again. I don't know whether it's something with gulp or the file system itself I don't understand.
It turns out that the problem was not associated with gulp - actually it was a problem with my IDE, WebStorm. While the IDE should normally update the files automatically using the mechanism described in this comment to another question
(and it also did in my case not so long ago...). Otherwise it falls back to checking all the files at a time interval. The file was not being updated in my IDE view, but it was already changed by gulp, which worked all the time. Until I fix the issue with automatic reloading, using File | Synchronize results in the up-to-date version of the file being shown.