I have a simple JS file that runs parcel bundler:
const Bundler = require('parcel-bundler');
(async () => {
const bundler = new Bundler('./src/index.html', {}); // options omitted for simplicity
await bundler.bundle();
})();
I run it from CLI with:
node ./build.js
While bundler works fine and creates bundled files in the dist folder, the process never exits, but rather remains in the async loop.
I tried adding then callback or using return but none of it helped.
Using process.exit() would of course stop the process but would also limit me from chaining this command in the CI, which is the whole purpose.
What am I doing wrong?
You need to set watch: false in your options to let Parcel know it should not watch but just build it once.
The default option is watch: true, so whenever you change something in your files, Parcel will recognize the change and rebuild your application.
Related
Is there some way to trigger a webpack build without using the command line webpack build task in a node.js script? I know I can use the exec function to execute a command line task, but I'm looking for a way that doesn't involve the command line at all.
I'm looking for something that works like
import webpack from "webpack";
await webpack.build(...);
You can use the webpack Node API (https://webpack.js.org/api/node/).
Create a webpack instance, as specified in the docs, like so:
import webpack from 'webpack';
const compiler = webpack({}, (err, stats) => {
if (err || stats.hasErrors()) {
// ...
}
// Done processing
});
Then, use the run method on compiler to, as the docs say, "kickstart all compilation work".
compiler.run(() => console.log('Done'));
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: ['']
})
I am using plugins in cypress and referred to https://docs.cypress.io/api/plugins/configuration-api.html#Usage. When we deploy them into jenkins, I am getting
`pluginsFile` is set to `/e2e/cypress/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js` or `.coffee` file.
Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.[39m
Error: Cannot find module 'fs-extra'
I did go through a few threads which manually asks you to download the fs-extra in node_module. I did that and the dependency has been automatically added into the package.json file. However, the build fails. The code runs perfectly when you run locally and all the test passes. However, this fails when the deployed into jenkins.
// promisified fs module
const fs = require('fs-extra')
const path = require('path')
function getConfigurationByFile (file) {
const pathToConfigFile = path.resolve('cypress', 'config', `${file}.json`)
return fs.readJson(pathToConfigFile)
}
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
// accept a configFile value or use development by default
const file = config.env.configFile || 'environment-2'
return getConfigurationByFile(file)
}
The code should deploy successfully on Jenkins, however, evening installing it locally on node_module doesn't work. Can somebody help in figuring out what I am missing, please?
This issue has been resolved. Thanks to #Mr.J. This had nothing to do with fs-extra. The entry point in docker file was not correct and I had to modify that. After modifying that, it worked fine.
If at all you have this issue,
1. Try installing fs-extra inside node_module.
2. please check the path in the cypress config file.
3. Check the path in docker file.
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 ==='));
});
Background
I am having this gulp watch task to handle sass compilation:
import gulp from 'gulp';
import sass from 'gulp-sass';
import concat from 'gulp-concat';
gulp.task("compile-scss", () => {
return gulp.src("assets/scss/**/*.scss")
.pipe(sass({ outputStyle: 'compressed' })
.on("error", sass.logError))
.pipe(concat("style.css"))
.pipe(gulp.dest("dist/css"));
});
gulp.task("watch-scss", ['compile-scss'], () => {
gulp.watch("assets/scss/**/*.scss", ["compile-scss"]);
});
I am then running gulp watch-scss and the process correctly compiles my files and start watching for new changes.
The problem
When I want watching to stop I am pressing Ctrl+C in the terminal and everything looks ok.
But then I make a change in the .scss file and expect it not be handled by the gulp task (should be already stopped). Anyway this change gets handled by the watch task as it seems still running.
Looking at the terminal code you can see where I start gulp watch-scss, where I press Ctrl+C and where task continues executing on change.
Environment details
OS: OS X 10.11 (El Capitan)
gulp version: 3.9.1
node version: 6.2.2
babel-core version: 6.11.4
History
The problem could be related to Node itself. Going into that direction I tried several solutions like terminating the process from within gulp like so:
process.on('SIGINT', function() {
process.exit();
});
It didn't help.
Read lot of info on that topic, but nothing helped. Here are two related questions, which didn't help either:
Stop a gulp watch task?
Terminate gulp-watch task
I can provide more details if needed.
Close the terminal and the session will be terminated. Run gulp again and try if CTRL + C works.