The following gulp.js file runs without error but does not output a bundle.js - at command line we run node gulp.js the console.log msgs inside task do not show but the others do thks for any help
var gulp = require("gulp");
var browserify = require("browserify");
var reactify = require("reactify");
var source = require("vinyl-source-stream");
console.log("read in requires");
gulp.task("scripts", function() {
console.log("task");
var bundler = browserify ({
entries: ["./app.js"],
transform: [reactify],
debug: true
});
var bundle = function() {
console.log("bundle");
return bundler
.bundle()
.pipe(source("bundle.js"))
.pipe(buffer())
.pipe(gulp.dest("./build"));
};
return bundle();
});
console.log("done");
Related
I have the start and deploy tasks working the way I want them to but I am trying to figure out how to update public/js/bundle.js when I make a change in app.js so that it can be watched.
Here's what I got so far:
var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var transform = require('vinyl-source-stream');
var browserify = require('browserify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var ios = browserify({
entries:['app.js']
});
const bundle = () => {
process.env.NODE_ENV = 'production';
ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'))
.pipe(streamify(uglify()))
.pipe(rename('bundle-ios.min.js'))
.pipe(gulp.dest('./public/js'));
return ios;
}
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'public/js/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
env: { 'NODE_ENV': 'development' },
});
}
// Start local server and watch bundles.
gulp.task('start', start);
// Build minified versions for prod.
gulp.task('deploy', bundle);
The fix was to watch all the individual javascript component and model files and add a compile task to the start task.
// Bundle and minify for development, use development version of libraries.
const compile = () => {
process.env.NODE_ENV = 'development';
const bundleAndroidDev = ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'));
return bundleIosDev;
}
// Start local server and watch for changes in compiled bundles.
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'apps/appName/components/*', 'apps/appName/models/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
tasks: ['compile'],
env: { 'NODE_ENV': 'development' }
});
}
// Compile bundle's on save.
gulp.task('compile', compile);
Following is the code I inherited for gulp and browserify
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
glob = require('glob'),
path = require('path'),
source = require('vinyl-source-stream'),
notifier = require('node-notifier'),
_ = require('underscore'),
watchify = require('watchify'),
jshint = require('gulp-jshint'),
chalk = require('chalk'),
del = require('del'),
webserver = require('gulp-webserver'),
cleanCSS = require('gulp-clean-css'),
babelify = require("babelify"),
jasmine = require('gulp-jasmine');
var browserifyables = './web-app/**/*-browserify.js';
function logError(error){
/* jshint validthis: true */
notifier.notify({
title: 'Browserify compilation error',
message: error.toString()
});
console.error(chalk.red(error.toString()));
this.emit('end');
}
function bundleShare(b, config) {
b.bundle()
.on('error', logError)
.pipe(source(config.destFilename))
.pipe(gulp.dest(config.destDir));
}
function browserifyShare(config, watch) {
var browserifyConfig = {
cache: {},
packageCache: {},
fullPaths: true,
insertGlobals: true
};
if(process.env.NODE_ENV !== 'production'){
browserifyConfig.debug = true;
}
var b = browserify(browserifyConfig);
b.transform('browserify-css', {});
b.transform(babelify, {presets: ["es2015"]});
// Need to fix dollar sign getting effed in angular when it gets minified before we can enable
if(process.env.NODE_ENV === 'production'){
b.transform('uglifyify', {global: true});
}
if(watch) {
// if watch is enable, wrap this bundle inside watchify
b = watchify(b);
b.on('update', function(ids) {
ids.forEach(function(id){
console.log(chalk.green(id + ' finished compiling'));
});
bundleShare(b, config);
});
b.on('log', function(message){
console.log(chalk.magenta(message));
});
}
// source to watch
b.add(config.sourceFile);
bundleShare(b, config);
}
gulp.task('minify-css', function() {
var minifyConfig = {compatibility: 'ie8'};
if(process.env.NODE_ENV !== 'production'){
minifyConfig.debug = true;
}
return gulp.src('./web-app/css/*/*.css')
.pipe(cleanCSS(minifyConfig))
.pipe(gulp.dest('./web-app/css'))
;
});
gulp.task('browserify', ['minify-css'], function(){
glob(browserifyables, {}, function(err, files){
_.each(files, function(file){
browserifyShare({
sourceFile: file,
destDir: path.dirname(file),
destFilename: path.basename(file).replace('-browserify', '')
});
});
});
});
I run the gulp task using
NODE_ENV='production' gulp browserify
The gulp tasks complete but does not terminate. The following is the output
[22:40:57] Using gulpfile ~/some/dir/Gulpfile.js
[22:40:57] Starting 'minify-css'...
[22:40:58] Finished 'minify-css' after 565 ms
[22:40:58] Starting 'browserify'...
[22:40:58] Finished 'browserify' after 2.12 ms
This slows down my build on jenkins considerably.
However if i comment out this line:
b.add(config.sourceFile);
The tasks exit but then it does not work ( for obvious reasons ).
So not sure what I am missing here. I need to figure out what prevents the task from exiting.
I am using the following gulpfile to compile my javascript code from ES6 to ES5.
var gulp = require('gulp');
var gutil = require('gulp-util');
var cssnano = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('gulp-babel');
var babelify = require('babelify');
var uglify = require('gulp-uglify');
//...
gulp.task('js', function () {
return buildScript('index.js', false);
});
function buildScript(file, watch) {
var props = {
entries: [folder_source + '/javascript/' + file],
debug : true,
transform: [babelify]
};
// watchify() if watch requested, otherwise run browserify() once
var bundler = watch ? watchify(browserify(props)) : browserify(props);
function rebundle() {
var stream = bundler.bundle();
return stream
.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(folder_dest + '/javascript/build/'));
}
// listen for an update and run rebundle
bundler.on('update', function() {
rebundle();
gutil.log('Rebundle...');
});
// run it once the first time buildScript is called
return rebundle();
}
function handleErrors() {
var args = Array.prototype.slice.call(arguments);
notify.onError({
title: 'Compile Error',
message: '<%= error.message %>'
}).apply(this, args);
this.emit('end'); // Keep gulp from hanging on this task
}
Everything works fine until Im starting to actually use ES6.
Example Source (index.js):
class Car{
}
Example Compiled (app.js):
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
class Car {}
},{}]},{},[1])
As you can see there is still ES6 code in the compiled file.
It seems like babelify is not doing its jop. I already tried several other gulp files from around the web, but I always got the same result.
Thank you!
Thanks to loganfsmyth I was able to solve the problem by adding the following to the props array:
transform: [[babelify, {presets: ["es2015"]}]]
I'm having a problem setting up a basic Gulpfile.
My JS task does not work. I get this error:
Error: ENOENT, no such file or directory
at Function.startup.resolveArgv0 (node.js:815:23)
at startup (node.js:58:13)
at node.js:906:3
What am I missing? I've tried setting the destination to various folders with no luck. Thanks in advance.
var gulp = require("gulp");
var to5 = require("gulp-6to5");
var concat = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");
var sass = require("gulp-ruby-sass");
var uglify = require("gulp-uglify");
var prefix = require("gulp-autoprefixer");
var watcher = gulp.watch(["./site/css/*.scss"], ["sass"]);
gulp.task("sass", function(){
return sass("./site/css/", { sourcemap: true, style: 'compressed' })
.on("error", function(err){
console.error(err.message);
})
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./site/css/"))
});
gulp.task("js", function(){
return gulp.src("./site/js/*.js")
.pipe(to5())
.pipe(concat("app.js"))
.pipe(gulp.dest("."));
});
gulp.task("watch");
gulp.task("default", ["sass"]);
I have the follwing gulp task to compile my client code:
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
gulp.task('compile', function() {
return browserify('./public/js/app.js', {transform: reactify, debug: true})
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./public/dist'));
});
The problem is that only the root ./public/js/app.js file is shown up in the source tab in chrome. All files that are required in app.js are missing.
After decompiling the source map data, it seems that only ./public/js/app.js is listed with the relative url, all other files have the absolute url on my machine.
{
"version": 3,
"sources": [
"/Users/andreaskoberle/projects/private/webshell/node_modules/browserify/node_modules/browser-pack/_prelude.js",
"./public/js/app.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/index.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/links.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/common/Box.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/common/Grid.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/sidebar.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ScriptSelector.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ShellOutput.js",
"/Users/andreaskoberle/projects/private/webshell/public/js/webShell/index.js"
],
The problem are the absolute paths in the source map. Using mold-source-map in my gulp task to convert to the absolute paths to relative ones, fix the issue:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
var mold = require('mold-source-map')
gulp.task('compile', function() {
return browserify('./public/js/app.js', {transform: reactify, debug: true})
.bundle()
.pipe(mold.transformSourcesRelativeTo('./'))
.pipe(source('app.js'))
.pipe(gulp.dest('./public/dist'));
});
I have a similar problem except in my case the sourcemap does not even contain absolute paths; it has only one entry for the root file.
My sources from the .map:
"sources":["theSrc/internal_www/js/renderContentPage.js"]
And my gulp task:
gulp.task('compileRenderContentPage', function () {
var b = browserify({
entries: 'theSrc/internal_www/js/renderContentPage.js',
debug: true
});
return b.transform(babelify, { presets: ['es2015'] })
.bundle()
.pipe(source('renderContentPage.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./browser/js/'));
});
haven't figures out the issue yet