I'm trying to create a gulp task that will execute Yeoman generator I'm developing. I've got this working using the following task, but I'm trying to find a way to not pass in the fully qualified path to the location of my globally installed NPM modules.
The gulp plugins I've seen (gulp-shell & gulp-run) execute a command (such as npm root -g) but I can't figure out how to read the text into a variable or if there's another / easier way to get this value.
gulp.task('run-yo', function () {
spawn('node', [
'--debug',
'/Users/ac/.npm-packages/lib/node_modules/yo/lib/cli.js',
'nodehttps'], { stdio: 'inherit' });
});
You can use node which
var which = require('which');
which.sync('yo');
Related
Short Question Version
Changes to files happen below a target directory. I have browsersync setup like this:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
However this is not detecting changes that occur in target subdirectories and refreshing the browser. Seems that the above lines are not enough?
Long Question Version
I have built a CLI. It watches for CSS changes in src/main/css and compiles the CSS (Using PostCSS) to target/main/css. The same is enabled for html templates in src/main/html.
Gaze watches for file changes and runs the functions that performs the compiling and this part works fine.
The full source code can be seen here.
I was hoping BrowserSync would pickup on the file changes in the target directory and refresh the browser when edits are performed, however I'm not seeing any refreshes. I have BrowserSync setup like this within the serve command:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
The CLI can be tested by doing:
git clone https://github.com/superflycss/cli
cd cli
npm i -g
Or just install from NPM:
npm i -g #superflycss/cli
Then run:
sfc new project
cd project
sfc serve
The target folder will open up in the browser. Change the URL to http://localhost:3000/test/html/. Edit the html in src/test/html/index.html. The changes compile to target/test/html/index.html and BrowserSync should pickup on the changes IIUC...but it's not...
Thoughts?
It's pretty obvious, but bs.reload("*.html"); has to be called from within the on event of the watcher. So in other words whenever there is a file change call bs.reload("*.html");.
Since I'm using gaze to watch for file changes, I ended up doing this:
gaze(PLI.SRC_MAIN_CSS, (err, watcher) => {
if (err) {
log('error', 'Error buliding src/main/css/ content.');
throw new Error(err);
}
/**
* Triggered both when new files are added and when files are changed.
*/
watcher.on('changed', function (filepath) {
buildMainCSS();
bs.reload("*.html");
});
});
Problem: I'm learning ES6 through playing around with the code. I found that it's quite annoying to rebuild and restart the server every time I made any changes.
Goal: I want the changes that I saved to be reflected on the browser, without having to manually rebuild, and restart the server. What's the simplest way to do that?
Background:
The current script configuration in the package.json file is as below.
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"start": "http-server -p 9000"
},
I hope this is clear. Thank you!
I believe you must be using gulp tasks to run your project. If so, browser-sync + gulp.watch() is the best option for this. Below is what working for me, add something like below to your gulp task .js file. Whenever you change and save your es6 source code, it will automatically build and refresh the browser.
var gulp = require('gulp');
var browser = require('browser-sync').create();
// your default task goes here that should add "watch-changes" as dependency
// watch changes in js and html files
gulp.task('watch-changes', function() {
browser.init({
// initiate your browser here, refer browser-sync website
});
gulp.watch(
['build/main.bundle.js', 'webapp/**/*.html'],
browser.reload);
});
Check here neat example.
Refer browser-sync website and npm gulp-watch task
Is there a way to run a packages gulp task from within my gulp task? Here's my file structure:
Root
|
|-- Gulpfile.js (task: get-files)
|
|-- node_modules
|
|-- packageA
|
|-- gulpfile.js (task: compile-custom)
I want to run the compile-custom task from packageA from within my get-files task in my own gulpfile. Ideally, I could also get a callback from the compile-custom task to know when it is complete.
I would advise against running a task from another gulpfile as you want, especially from a node_modules package. A reason to not wanting to do so is due to the fact that the package can change/update and then break your code because of it.
Preferably you should just copy the gulpfile task you want into either your gulpfile and incorporate it into your project or just create a new file where you can easily distinguish that it is something separate from your gulpfile and just call it by requiring it in your own gulfile just like you would any other package and/or JS function. With either of these options do not forget to install the dependencies into your package.json files and then run npm install.
Note: To run a gulp task from within a gulp task you can use
gulp.start('taskname')
Although the following should be used only if completely necessary. In addition will be deprecated in the newer version of Gulp v4 (refer to this). The way to call a task is through just creating a function as mentioned above and calling that function in your gulpfile.
Example of gulp function calling:
var someFile = require('./someFile.js');
gulp.task('my-custom-task', function () {
someFile.doSomething('foo', 'bar');
});
If your function does something asynchronously, it should call a callback at the end, so gulp is able to know when it’s done:
var someFile = require('./someFile.js');
gulp.task('my-custom-task', function (callback) {
someFile.doSomething('foo', 'bar', callback);
});
I'm having the following file structure:
/ src
-- app.less
/ gulp
-- index.js
-- gulpfile.js
This file structure is mounted in a vagrant box in /vagrant which means the path to app.less becomes /vagrant/src/app.less. Yes, I've checked this.
gulpfile.js
require('./gulp');
index.js
var paths = {
less: '/vagrant/src/app.less'
};
gulp.task('less', function () {
console.log('less function running');
return gulp.src(paths.less)
.pipe(less());
});
gulp.task('watch:styles', function () {
console.log('watch function running');
gulp.watch(paths.less, gulp.series('less'));
});
gulp.task('watch', gulp.parallel('watch:styles'));
gulp -v returns:
[10:02:05] CLI version 0.4.0
[10:02:05] Local version 4.0.0-alpha.1
gulp watch returns:
[09:45:20] Using gulpfile /vagrant/gulpfile.js
[09:45:20] Starting 'watch'...
[09:45:20] Starting 'watch:styles'...
watch function running
I've been using Gulp 4 for over 2 months without problems with the watcher. Since last week the watcher is not responding to files that are being changed. I've tried several editors, I've tried multiple paths like '/vagrant/**/*.less' and '../src/*.less' and even the absolute path to app.less '/vagrant/src/app.less', none of them worked.
After some research I found several issues on the github repo of Gulp 4 about the watcher. Yet, I can't figure out what the problem is. Maybe I'm overlooking an error in my code or something new in the docs, but I'm trying to solve this since yesterday morning without any luck.
It appears you're using Vagrant. If you have Gulp running on your Vagrant machine instead of on the host it won't detect any changes to files that you make on the host. This is because the events that notify the OS about filesystem changes don't propagate into the VM.
If this is the case, the solution is to simply run Gulp wherever you actually make changes to the files (i.e. if you make the changes on the VM, run it on the VM, if you make changes on the host, run Gulp on the host).
Also maybe make the path relative, instead of tying your implementation to your Vagrant box. i.e. less: './src/app.less'.
I have an isolated npm module with assets. I want to add gulp to this. Inside the project aside from my assets i have a bash script that downloads and updates my assets. I have been trying to find a way to create a gulp task that can run this script but i have not yet been able to get it to work. I tried the following and although it ran it did not run the script.
gulp.task('update-json', function(){
gulp.src('assets/update_json.sh');
});