Develop Reference

How to execute my own script after every webpack's auto build in watch mode of vue-cli 3.x?

My current situation
Now I am using vue-cli#3.9.2. For some reason, I need to watch file change of my source code to run webpack's build, with vue-cli-service build --watch.
My current solution
Currently, I run another Node.js process to watch file change, of webpack's bundle. I really suffered from this terrible development experience.
Compare with vue-cli 2.x
When I used vue-cli 2.x, I actually run webpack(), one native API of webpack, in build/build.js, so I could use webpack().watch() instead to run build and pass my own script as callback function. However in vue-cli 3.x, there's no way and no need to approach the webpack's native API, within my knowledge.
Summary
I wish to run my own script after webpack's every auto build, though I could not find any guidance in vue-cli's official document.

From my understanding - you have a Webpack plugin use case. Just like for example webpack-build-notifier sends a notification after a rebuild.
I am not a Webpack plugin author, but this is already working for me:
// vue.config.js
const ArbitraryCodeAfterReload = function(cb) {
this.apply = function(compiler) {
if (compiler.hooks && compiler.hooks.done) {
compiler.hooks.done.tap('webpack-arbitrary-code', cb);
}
};
};
const myCallback = function() {
console.log('Implementing alien intelligence');
};
const plugins = [];
const isDev = process.env.NODE_ENV === 'development';
if (isDev) {
plugins.push(new ArbitraryCodeAfterReload(myCallback));
}
module.exports = {
configureWebpack: {
plugins
}
};
If this is not the right compilation step - the Webpack documentation should somewhere have the right hook for your use case.
Maybe there is already a plugin available which already does what you need...

Maybe this can help you. This is just an example. You only need to use &&
npm run start && npm run build
So after the npm run start script execute your npm run build script will run after the first one
Update you can use this package webpack-shell-plugin
const WebpackShellPlugin = require('webpack-shell-plugin');
new WebpackShellPlugin({
onBuildStart: [''],
onBuildEnd: ['']
})

Set environment mode and output messages when starting a gulp task

I'm wondering how I can output messages to the terminal when I run a gulp process and how I can set an environment to run tasks in specific ways.
I'm sure I've seen something like gulp scripts:dev before but don't know how to use, can anyone advice how I can do this?
How would you run the default task this way, gulp deafult:dev?
Is it possible to ask the user which environment they want to run the task for in the terminal when the execute the gulp command, if they don't specify it.
I've used the gulp-if plugin to achieve this but it works slightly differently, you need to set a node environment variable before running gulp i.e. NODE_ENV=dev gulp.
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
gulpif = require('gulp-if'),
shell = require('gulp-shell');
var isDev = process.env.NODE_ENV === 'dev';
// gulp-shell task to output messages to terminal
gulp.task('info', shell.task([
'echo run in developer mode with this command: NODE_ENV=dev gulp'
]));
// Styles Task
// Uses gulp-if plugin to run task differently dependent on env.
gulp.task('styles', ['info'], function () { // eslint-disable-line strict
return sass('css/sass/*.scss', {
style: gulpif(!isDev,'compressed','expanded'),
cacheLocation: 'css/sass/.sass-cache',
sourcemap: isDev
})
[...code ommitted...]
});
gulp.task('default', ['h','styles']);
Also I've used gulp-shell above to output messages to the terminal, but it's pretty basic. Is there anyway I can do something similar with line breaks and colours with the message I output to the terminal.

Take a look at gulp-environments - you can set as many as you like but dev and prod are sufficient for most. You can define each in the gulpfile and set different events to occur from within each gulp script. So your styles script can contain a .pipe(dev(some dev only sourcemap code))and a .pipe(prod(some mini fixed build code)). You can run the script from git bash with an --env flag... gulp --env dev or gulp --env prod. And run two completely different build cycles from more or less the same script. You set your default gulp task to run all your page scripts and it will only execute the ones for each environment as it loops.

To output messages to the terminal you can require gulp-util node module.
Example code:
gulp.task('test', () => {
gutil.log(gutil.colors.yellow('=== Testing ==='));
});

Browser sync for Angular SPA

I'm using browser sync with an Angular SPA. Serving the site looks like this:
gulp.task('serve', function() {
browserSync.init(null, {
server: {
baseDir: './',
middleware: [historyApiFallback()]
}
});
});
This works fine. The use of historyApiFallback (npm module) means browser sync doesn't freak out when going to a new URL path when all it needs to do is continue serving the index.html.
The problem I have is with watching files. I've tried this:
gulp.task('watch', function() {
watch('./src/scss/**/*.scss', function() {
runSequence('build-css', browserSync.reload);
});
});
The watch task does work because the build-css task triggers fine. Then the console logs Reloading Browsers... and just hangs. The browser never gets the CSS injection or reload. What am I doing wrong here?
Note that I'm using gulp-watch not the native gulp watch purposely.

I recommend you to use the lite-server. It is a simple customized wrapper around BrowserSync to make it easy to serve SPAs(you don't even have to configure the history api).
You can use it by simple adding an entry in the scripts object in your package.json and running the following command: npm run dev.
"scripts": {
"dev": "lite-server"
},
The module will automatically watch for changes of your files and keep then sync. So it will work with your gulp, because it will update your browser after the build-css task is executed(because the output files will change).
I am currently using it with angular 1, angular 2 and vue.js and worked fine with all.

Gulp error in WebStorm: Failed to list gulp tasks

My WebStorm has stopped read and run gulp tasks.
It was working fine until last Friday.
This is an error that appears in console:
Failed to list gulp tasks in questionary/gulpfile.js: Failed to parse
JSON -> Unterminated array at line 1 column 5 path $[1] * Edit
settings
$ /usr/local/bin/node
/Users/rkon2006/Projects/My/questionary/node_modules/gulp/bin/gulp.js
--no-color --gulpfile /Users/rkon2006/Projects/My/questionary/gulpfile.js --tasks-json
[17:26:14] Using gulpfile ~/Projects/My/questionary/gulpfile.js
[17:26:14] Starting 'default'... Default task...
This is the code from my gulpfile.js (it doesn't start even with this code):
var gulp = require('gulp');
gulp.task('default', function () {
console.log('Default task...');
});
Process finished with exit code 0
I use gulp v4.0, node js 4.1.1 (tried defferent versions from 0.10.28 up to 4.1.1) and npm 2.14.4.
Do you have any ideas about this?

I have the same problem with webstorm after install a updated version of node.
The solution for me is the following:
In the block Gulp where webstorm show the list of task, click the cog icon and select gulp settings, in the section "Gulp package" add the path to the local gulp package(the gulp inside the node_modules in your project).
Example of path: yourproject\node_modules\gulp

Update node version and npm itself, that did the trick.

The problem is that some text is logged to standard output stream when evaluating gulpfile.js, but before running any gulp task (i.e. logging happens outside of gulp tasks);
possible workarounds:
Avoid logging anything to standard output stream outside of gulp
tasks.
Or
Don't log to standard output stream if it's started for listing
tasks, like:
if (!isListingTasks()) {
console.log('[my info]');
}
function isListingTasks() {
return process.argv[process.argv.length - 1] === '--tasks-json';
}

I was having same problem and it was fixed by selecting different Node Interpreter version e.g. in the below image I selected 8.9.2 and then clicked small refresh button in Gulp window and the issue was fixed.

Using node-inspector with Grunt tasks

Does someone used node-inspector with Grunt for application debugging? If not, Can you recommend a debugging tool for Grunt based apps?
I'm working with nodejs for a server side app and I have Grunt to use separated tasks (this is because users can execute tasks separately).

To run grunt in debug, you need to pass the grunt script to node explicitly:
node-debug $(which grunt) task
and put a debugger; line in your task. node-inspector will then open a browser with debugging tools.
Edit 28 Feb 2014
node-inspector has added the command node-debug, which launches node in a --debug state and opens the browser to the node-inspector page, stopping when it hits the first debugger line or set breakpoint.
Edit 30 January 2015
On Windows, things are a touch more complicated. See the answer from #e.gluhotorenko for instructions.

Windows solution
Run
node --debug-brk c:\Users\username\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt taskname
from cmd in the directory with your Gruntfile.js. Do not forget to put debugger; line in necessary places.

To debug, we have to modify the grunt file under bin. On my machine, grunt is installed globally, so I went to /usr/local/lib/node_modules/grunt/bin
I opened the file and modified:
#!/usr/bin/env node
To
#!/usr/bin/env node --debug-brk
--debug-brk will break on the first line of javascript ran.
Doing that alone isn't quite enough though, since you won't be able to find you're grunt task js file in the drop down in node inspector, so you have to modify the file you're interested in debugging by adding debugger; where you want the breakpoint to happen.
Now you can click continue after the first break, and you'll break on you're debugger; line
Pretty kludgy, but it's the only way I've found so far.

I recently created grunt-node-inspector to easily configure node-inspector with the rest of your grunt workflow, check it out: https://github.com/ChrisWren/grunt-node-inspector
Here is a section of a Gruntfile which illustrates how you can debug a grunt task using grunt-node-inspector, grunt-concurrent, and grunt-shell: https://github.com/CabinJS/Cabin/blob/master/Gruntfile.js#L44-L77

I have done a task to run my app and launch node-inspector.
It is far better than current proposition, you just have to add this task in gruntfile:
grunt.registerTask('debug', 'My debug task.', function() {
var done = this.async();
grunt.util.spawn({
cmd: 'node',
args: ['--debug', 'app.js'],
opts: {
//cwd: current workin directory
}
},
function (error, result, code) {
if (error) {
grunt.log.write (result);
grunt.fail.fatal(error);
}
done();
});
grunt.log.writeln ('node started');
grunt.util.spawn({
cmd: 'node-inspector',
args: ['&'],
opts: {
//cwd: current workin directory
}
},
function (error, result, code) {
if (error) {
grunt.log.write (result);
grunt.fail.fatal(error);
}
done();
});
grunt.log.writeln ('inspector started');
});

Great answers here. In 2017, now you can do
node --inspect --debug-brk $(which grunt) taskName
Which prints something like.
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/232652c3-f63c-4b00-8de9-17dfad5db471
Open that URL in chrome, and you're good to go!
I'm using Node 7.3.0 and I'm on Mac. You might have to follow some of the advice in other posts to get it going on Windows.

2019 update
If you want to launch the grunt task in debug mode and break at first line:
node --inspect-brk $(which grunt) taskName
If you want to launch the grunt task in debug mode at a specific port:
node --inspect-brk=8080 $(which grunt) taskName
if you want to attache VSCODE to the node process running the debugging session of grunt, use the following configuration in vscode:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach by port IP 5656",
"port": 8080
}
]
}