Develop Reference

Generate a local HTML file with PUG (npm / gulp)

How to create a HTML file with the same name as my pug file each time I save using gulp?
All the docs on https://pugjs.org/ explain how to return pug in console...

You need task runner or module bundler for that. So choose one -grunt/gulp/webpack. Consider webpack as newest one and width best functionality.
Here an example width gulp as moust easy to understand from my point of view.
First install npm packages for compiling pug and watch for changes - npm install --save gulp-pug gulp-watch.
Then create and config your gulpfile.js.
First import an npm modules
var pug = require('gulp-pug');
var watch = require('gulp-watch');
Then create compiling task
gulp.task('pug',function() {
return gulp.src('PATH_TO_TEMPLATES/*.jade')
.pipe(pug({
doctype: 'html',
pretty: false
}))
.pipe(gulp.dest('./src/main/webapp/'));
});
And then create watcher
gulp.task('watch', function () {
return watch('PATH_TO_TEMPLATES/*.jade', { ignoreInitial: false })
.pipe(gulp.dest('pug'));
});
And run gulp-watch from you console.

Here an example width gulp 4.0
install npm packages for compiling pug/jade by following command
npm install --save gulp-pug .
create script with name gulpfile.js
//gulpfile.js
var gulp = require("gulp"), pug = require('gulp-pug');
function pugToHtml(){
return gulp.src('src')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('dest'));
}
exports.pugToHtml = pugToHtml;
We can run the above code using the following command in your file directory:
gulp pugToHtml

You can now do the same without requiring gulp-watch as well.
Require module:
var pug = require('gulp-pug');
Task example:
//create task
gulp.task('pug', function buildHTML(){
gulp.src('src/pre/*.pug')
.pipe(pug())
.pipe(gulp.dest('src/post'));
});
Watch:
//pug serve
gulp.task('watch', ['pug'], function() {
gulp.watch(['src/pug-pre/*.pug'], ['pug']);
});
You can then run gulp watch. You can also set watch to the default task so you only have to write gulp in Terminal, if you are not automating anything else:
// default task
gulp.task('default', ['watch']);

How to avoid bundling ReactJs multiple times using Gulp?

I am trying to use ReactJS as view library rendering on client-side. Also I am imports lots of components from Material-UI as components.
One issue is that I need to use gulp to setup browserify(for using module in browser ) and babelify(compiling JSX to Javascript). But I found that if React is bundled more than one time, the UI would have error on behavior and styling.
According to this article, I setup the gulpfile.js as the following.
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var dependencies = [
'react',
'react-dom',
'material-ui',
'react-tap-event-plugin'
];
var scriptsCount = 0;
gulp.task('scripts', function () {
bundleApp(false);
});
gulp.task('deploy', function (){
bundleApp(true);
});
gulp.task('watch', function () {
gulp.watch(['./app/*.js'], ['scripts']);
});
gulp.task('default', ['scripts','watch']);
function bundleApp(isProduction) {
scriptsCount++;
var appBundler = browserify({
entries: './app/app.js',
debug: true
})
if (!isProduction && scriptsCount === 1){
browserify({
require: dependencies,
debug: true
})
.bundle()
.on('error', gutil.log)
.pipe(source('vendors.js'))
.pipe(gulp.dest('./web/js/'));
}
if (!isProduction){
dependencies.forEach(function(dep){
appBundler.external(dep);
})
}
appBundler
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.on('error',gutil.log)
.pipe(source('bundle.js'))
.pipe(gulp.dest('./web/js/'));
}
If I run:
gulp scripts
more than once, the UI would have some problems and error in console.
So HOW should I modify the gulpfile to avoid bundling the React? Help please.

You need to include react-addons-transition-group to your external dependency list. I was facing the same problem.
Here is what I did to resolve it.
Cleaned up node_modules rm -rf node_modules
npm install react-addons-transition-group --save
npm install
Run gulp scripts
I hope that helps.

"Warning: Task "babel" not found. Use --force to continue."

I have this simple code on my gruntfile.js:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
babel: {
options: {
sourceMap: true
},
dist: {
files: {
"dist/app.js": ["src/app.js"]
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
But show me this error when run:
Warning: Task "babel" not found. Use --force to continue.
Aborted due to warnings.
Process finished with exit code 3
Any help? Never convert from ecmascript 6 to 5 :(
Here My files:
http://www.mediafire.com/download/nabq78bs323u47b/DemoBable.zip

I downloaded your code to try to help you. I did it. Please see my steps belows:
Step 1: Go to the root project directotry
cd DemoBable
Step 2: Install grunt
npm install --save-dev grunt
Step 3: Install load-grunt-tasks
npm install --save-dev load-grunt-tasks
Step 4: Install grunt-babel
npm install --save-dev grunt-babel
Step 5: Finaly, run it
grunt
The output should be:
Running "babel:dist" (babel) task
Done, without errors.
EDITED
To convert to code to ecma 5. Your gruntfile.js should be:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
"babel": {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: {
"dist/app.js": "src/app.js"
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
And you have to install babel-preset-es2015:
npm install --save-dev babel-preset-es2015

using series and parallel tasks in gulp 4.0

I am trying to manipulate text before a file is sent to browserify, and I am attempting to use gulp.series to do this. Here's how:
gulp.task('dev_urls', function() {
gulp.src([ 'app/index.js' ])
.pipe(...)
.pipe(gulp.dest(...))
gulp.task('build_dev',
gulp.series('dev_urls', 'browserify', gulp.parallel('copy')))
When I execute the build_dev task using gulp build_dev from the command line, I am given this error:
/usr/local/lib/node_modules/gulp/bin/gulp.js:121
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /usr/local/lib/node_modules/gulp/bin/gulp.js:121:19
at doNTCallback0 (node.js:407:9)
at process._tickDomainCallback (node.js:377:13)
at Function.Module.runMain (module.js:477:11)
at startup (node.js:117:18)
at node.js:951:3
How can I get this to work?
EDIT:
I am getting that same error with this file:
var gulp = require('gulp');
gulp.task('build_dev', function() {
console.log(1);
})

You need to return from your function.
gulp.task('dev_urls', function() {
return gulp.src([ 'app/index.js' ])
.pipe()
}
Also make sure that gulp is installed correctly.
$ sudo rm /usr/local/bin/gulp
$ sudo rm -rf /usr/local/lib/node_modules/gulp
$ npm uninstall gulp
$ npm install gulpjs/gulp-cli#4.0 -g
# install Gulp 4 into your project
$ npm install gulpjs/gulp.git#4.0 --save-dev

How to reset -g parameter for "npm install" in hooks scripts?

I have a following project structure:
install.js:
var path = require('path'),
exec = require('child_process').exec;
exec('npm install', {cwd: path.join(__dirname, './some_modules')});
package.json:
"scripts": {
"install": "node install.js"
},
"dependencies": {
"gulp": "3.8.10"
},
And have some dependencies in some_modules/package.json.
In case installation locally we get the expected result:
But in case installation globally (with -g parameter) we have following broken structure:
Question: How to get rid of the influence -g parameter for install.js -> exec('npm install') ?
Try it here: https://github.com/MishaMykhalyuk/npm-i-with-g-and-hooks (npm install -g git+https://github.com/MishaMykhalyuk/npm-i-with-g-and-hooks.git).