I hate javascript tooling.
I have this config file:
var source = require('vinyl-source-stream');
var gulp = require('gulp');
var tap = require('gulp-tap');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var csso = require('gulp-csso');
var jshint = require('gulp-jshint');
var watchify = require('watchify');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');
gulp.task('prod', ['assets', 'prod-css'], function() {
return browserify('./src/main.js', {
standalone: standalone
}).transform('babelify',
{ presets: ["#babel/preset-env"],
plugins: [] })
.bundle()
.on('error', onError)
.pipe(source('okeyground.min.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest(destination));
});
when I add a debugger; command it doesn't get produced in the minified js. Does it get removed, or how can I put it in.
In your code set the drop_debugger property to false in the compress options:
.pipe(
uglify({
compress: {
drop_debugger: false,
},
})
)
Related
I am using npm link to link other package here in this project now when that package got updated i want to use auto watch feature and restart the app.
How to watch changes for node modules ?
gulp.js
var gulp = require("gulp");
var ts = require("gulp-typescript");
var uglify = require("gulp-uglifyes");
var gulpif = require("gulp-if");
var log = require("fancy-log");
var nodemon = require('gulp-nodemon');
var tsProject = ts.createProject("tsconfig.json");
gulp.task("default", () => {
return tsProject.src().pipe(tsProject()).pipe(gulpif(arg.env === 'prod', uglify())).pipe(gulp.dest("dist"));
});
gulp.task('stream', ['default'], function develop() {
var stream = nodemon({
script: 'server.js',
ext: 'js',
watch: "../project/local",
ignore: ['ignored.js'],
tasks: ["default"]
}) return stream.on('restart', function() {
console.log('restarting nodemon')
}).on('crash', function() {
console.error('Application has crashed!\n') stream.emit('restart', 10)
})
})
I try to use transform-es2015-classes plugin with gulp, browserify, reactify.
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
var reactify = require('reactify');
var util = require('gulp-util');
gulp.task("reactcompile", function () {
// app.js is your main JS file with all your module inclusions
return browserify({entries: './src/main/app/reactjs/react-app.js', debug: true})
.transform("babelify",
{
plugins: [
'transform-es2015-classes', { loose: true }
],
presets: ["es2015", "react", "stage-0"]
})
.bundle()
.on('error', util.log.bind(util, 'Browserify Error'))
.pipe(source('react-app.js'))
.pipe(buffer())
.pipe(gulp.dest('./build'))
.pipe(livereload());
});
As I run gulp, I get the error:
[12:06:45] Browserify Error { Error: Plugin 1 specified in "base"
provided an invalid property of "loose" while parsing file: mypath\react-app.js
Is my syntax wrong or what is the problem?
You're missing a set of []s.
plugins: [
'transform-es2015-classes', { loose: true }
]
should be
plugins: [
['transform-es2015-classes', { loose: true }]
]
so the plugin and its arguments are a single item in the plugins array.
I have a gulp file, and when I run it only the JavaScript files get complied and the less files doesn't get compiled, and I cannot seem to understand why is this happening.
This is my gulp file:
'use strict';
var path = require('path');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var livereload = require('gulp-livereload');
var jsFiles = ['*.js', 'src/**/*.js'];
// js hints
gulp.task('hints', function(){
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {
verbose: true
}))
.pipe(jscs()); });
// less
gulp.task('less', function () {
return gulp.src('./public/src/less/main.less')
.pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
.pipe(gulp.dest('./public/src/less/css')); });
// concat
gulp.task('concat', ['concat:css', 'concat:js']); gulp.task('concat:css', function() {
return gulp.src([
'public/lib/bower_components/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bower_components/swiper/dist/css/swiper.min.css',
'public/lib/bower_components/font-awesome/css/font-awesome.min.css',
'public/src/less/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(gulp.dest('./public/build/')); }); gulp.task('concat:js', function() {
return gulp.src([
'public/lib/bower_components/jquery/dist/jquery.min.js',
'public/lib/bower_components/bootstrap/dist/js/bootstrap.min.js',
'public/lib/bower_components/swiper/dist/js/swiper.min.js',
'public/lib/bower_components/jquery.scrollTo/jquery.scrollTo.min.js',
'public/lib/bower_components/jquery.localScroll/jquery.localScroll.min.js',
'public/lib/bower_components/jquery-waypoints/lib/jquery.waypoints.min.js',
'public/lib/bower_components/gsap/src/uncompressed/TweenMax.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js',
'public/src/js/init.js',
'public/src/js/utils.js',
'public/src/js/main.js'
])
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/build/')); });
// watch
gulp.task('watch', ['watch:css', 'watch:js']);
gulp.task('watch:css', function () {
gulp.watch('public/src/less/*.less', ['less', 'concat:css']);
});
gulp.task('watch:js', function () {
gulp.watch('public/src/js/*.js', ['concat:js', 'hints']);
});
gulp.task('build', [ 'less', 'concat']);
gulp.task('development', [ 'less', 'concat', 'watch']);
When I run gulp development the css and js file gets created under the build folder but because the less files dont get compiled to css the css file under build folder has none of my styles.
Does someone know how to solve this issue?
Thank you
I'm trying to create a gulp task with browserify and babelify. Here is the task:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task('js', function () {
browserify('./resources/js/*.js')
.transform(babelify)
.bundle()
.pipe(source('*.js'))
.pipe(gulp.dest('./public/js'));
});
I found a few sample code, tried to use them, but the result was always the same.
When i run the task, and save my example.js file, the following error occurs:
TypeError: browserify(...).transform is not a function
What am I doing wrong?
You're mixing up the API for browserify and gulp-browserify.
From the gulp-browserify docs, you'll want to do something like this:
var gulp = require('gulp')
var browserify = require('gulp-browserify')
gulp.task('js', function () {
gulp.src('./resources/js/*.js')
.pipe(browserify({
transform: ['babelify'],
}))
.pipe(gulp.dest('./public/js'))
});
EDIT: Since this question was first answered, gulp-browserify has been abandoned and gulp has evolved a great deal. If you'd like to achieve the same thing with a newer version of gulp, you can follow the guides provided by the gulp team.
You'll end up with something like the following:
var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');
gulp.task('default', function () {
var b = browserify({
entries: './resources/test.js',
debug: true,
transform: [babelify.configure({
presets: ['es2015']
})]
});
return b.bundle()
.pipe(source('./resources/test.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', util.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
I am using Gulp as my task runner and browserify to bundle my CommonJs modules.
I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development.
Is there a way to speed up the task, or do I have any noticeable problems in my task?
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./main.js'], // Only need initial file
transform: [reactify], // Convert JSX to javascript
debug: true, cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // On update When any files updates
var updateStart = Date.now();
watcher.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
console.log('Updated ', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create initial bundle when starting the task
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
I am using Browserify, Watchify, Reactify and Vinyl Source Stream as well as a few other unrelated modules.
var browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');
Thanks
See fast browserify builds with watchify. Note that the only thing passed to browserify is the main entry point, and watchify's config.
The transforms are added to the watchify wrapper.
code from article pasted verbatim
var gulp = require('gulp');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watchify = require('watchify');
var browserify = require('browserify');
var bundler = watchify(browserify('./src/index.js', watchify.args));
// add any other browserify options or transforms here
bundler.transform('brfs');
gulp.task('js', bundle); // so you can run `gulp js` to build the file
bundler.on('update', bundle); // on any dep update, runs the bundler
function bundle() {
return bundler.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you dont want sourcemaps
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
.pipe(sourcemaps.write('./')) // writes .map file
//
.pipe(gulp.dest('./dist'));
}
You have to use watchify and enable its cache. Take a look at :
https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2
and for more optimisation when building source-map you could do that :
cd node_modules/browserify && npm i substack/browser-pack#sm-fast
this would safe you half of time
part of my gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');
var path = {
OUT : 'build.js',
DEST2 : '/home/apache/www-modules/admimail/se/se',
DEST_BUILD : 'build',
DEST_DEV : 'dev',
ENTRY_POINT : './src/js/main.jsx'
};
gulp.task('watch', [], function() {
var bundler = browserify({
entries : [ path.ENTRY_POINT ],
extensions : [ ".js", ".jsx" ],
transform : [ 'reactify' ],
debug : true,
fullPaths : true,
cache : {}, // <---- here is important things for optimization
packageCache : {} // <---- and here
});
bundler.plugin(watchify, {
// delay: 100,
// ignoreWatch: ['**/node_modules/**'],
// poll: false
});
var rebundle = function() {
var startDate = new Date();
console.log('Update start at ' + startDate.toLocaleString());
return bundler.bundle(function(err, buf){
if (err){
console.log(err.toString());
} else {
console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms');
}
})
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST2 + '/' + path.DEST_DEV))
;
};
bundler.on('update', rebundle);
return rebundle();
});
gulp.task('default', [ 'watch' ]);
Many thanks to #PHaroZ for that answer. I had to modify a little bit that code for my needs though. I am working with ReactJS on Symfony2 framework and all my builds were taking 7s-21s!!! Crazy.. So that's what I have now:
var path = {
OUT : 'app.js',
DEST_BUILD : './src/MyBundle/Resources/js/dist',
ENTRY_POINT : './src/MyBundle/Resources/js/src/app.js'
};
gulp.task('watch', [], function() {
var bundler = browserify({
entries : [ path.ENTRY_POINT ],
extensions : [ ".js", ".jsx" ],
// transform : [ 'reactify' ],
debug : true,
fullPaths : true,
cache : {}, // <---- here is important things for optimization
packageCache : {} // <---- and here
}).transform("babelify", {presets: ["es2015", "react"]});
bundler.plugin(watchify, {
// delay: 100,
// ignoreWatch: ['**/node_modules/**'],
// poll: false
});
var rebundle = function() {
var startDate = new Date();
console.log('Update start at ' + startDate.toLocaleString());
return bundler.bundle(function(err, buf){
if (err){
console.log(err.toString());
} else {
console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms');
}
})
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_BUILD))
;
};
bundler.on('update', rebundle);
return rebundle();
});
Now first compile takes around 20s and each time I update my file it takes around 800ms. It's just enough time to switch from IDE to my browser.