When I run gulp I get an "updating!" and "updated!" log after saving main.js but there's no bundle ever built
gulpfile.js:
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var util = require('gulp-util');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./dist/main.js'], // Only need initial file, browserify finds the deps
transform: [reactify], // We want to convert JSX to normal javascript
debug: true, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
.on('error', util.log)
// This is where you add uglifying etc.
.pipe(gulp.dest('/build/'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.on('error', util.log)
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('/build/'))
.on('error', util.log);
});
// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
gulp.watch('styles/**/*.css', function () {
return gulp.src('styles/**/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('build/'));
});
});
// Just running the two tasks
gulp.task('default', ['browserify', 'css']);
My file structure is
/build
/dist
-index.html
-main.js
/node_modules
/styles
gulpfile.js
I am not finding any errors and I am completely lost at this point. I've tried changing directories around and reloading everything but nothing works.
Update lines that contain gulp.dest('/build/') to gulp.dest(__dirname + '/build/'). Currently your file located at drive_root_dir/build/main.js
Related
My project's setup uses a combination of python's Flask on the backend which serves a fairly simple javascript React webpage using gulp.
Whether I'm debugging frontend code through Chrome or Firefox, I have to do a hard refresh multiple times before the changes make it to the browser. I see the gulp console log Finished 'transform' after N ms after each save, which leads me to believe it's the browsers fault.
I am not a front end engineer so I'm wondering what more experienced devs use. Hitting Cmd+Shift+R 5-20 times after each save is a little mind bogglingly inefficient.
current gulpfile.js:
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
size = require('gulp-size'),
del = require('del'),
babelify = require('babelify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util');
var compiled_dir = './static/scripts/jsc';
var js_dir = './static/scripts/js';
function handle_error(err) {
gutil.log(err.message);
gutil.beep();
return process.exit(2);
}
gulp.task('transform', function () {
browserify({ entries: js_dir + '/main.js', debug: true })
.transform(babelify)
.bundle()
.on('error', handle_error)
.pipe(source('main.js'))
.pipe(gulp.dest(compiled_dir));
browserify({ entries: js_dir + '/userMgmt.js', debug: true })
.transform(babelify)
.bundle()
.on('error', handle_error)
.pipe(source('userMgmt.js'))
.pipe(gulp.dest(compiled_dir));
});
gulp.task('clean', function (cb) {
del([compiled_dir], cb);
});
gulp.task('default', ['clean'], function () {
gulp.start('transform');
gulp.watch(js_dir + "/*", ['transform']);
});
Method 1: Use this gulp-cache package to disable cache in development mode.
This will work:
var gulp = require('gulp');
var usemin = require('gulp-usemin');
var cache = require('gulp-cache');
gulp.task('default', function () {
return gulp.src('src/index.html')
.pipe(gulp.task('clear', function (done) {
return cache.clearAll(done);
});)
.pipe(usemin({
js: []
}))
.pipe(gulp.dest('dist'));
});
If you don't know how to use it, please update your question with gulp config file, I will configure you that.
Method 2: Configure your watcher.
$ npm install browser-sync --save-dev
var browserSync = require('browser-sync').create();
gulp.watch(['./**/*.{scss,css,html,py,js}'], ['clearCache', browserSync.reload]);
gulp.task('clearCache', function (done) {
return cache.clearAll(done);
});
I'm having some problems with my gulpfile
"use strict"
var gulp = require("gulp")
var browserify = require("browserify")
var source = require("vinyl-source-stream")
var livereload = require('gulp-livereload')
var watchify = require('watchify')
gulp.task("default", () => {
livereload.listen()
var bundler = browserify("./src/components/index.jsx")
.plugin(watchify, {ignoreWatch: './src/components/*'})
.transform("babelify", {presets: ["es2015", "react"]})
bundle(bundler)
bundler.on('update', function () {
bundle(bundler)
})
})
function bundle(bundler) {
bundler
.bundle()
.pipe(source('bundle.js')) // Set source name
.pipe(gulp.dest("./public/dist"))
.pipe(livereload()); // Reload the view in the browser
}
When I execute it using gulpI get the following messages
[02:06:23] Using gulpfile ~/react-rpi/gulpfile.js
[02:06:23] Starting
'default'... [02:06:23] Finished 'default' after 24 ms
But bundle.js is not created. Any key? Thanks in advance!
why don't you try this?
function bundle(bundler) {
return bundler.bundle().on('error', function (err) {
console.error(err.message)
this.emit('end')
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({ loadMaps: true }))
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest('./public/dist/js/'))
.pipe(plugins.livereload())
}
Then you can see what's happening
here's my gulp file
var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var reactify = require('reactify')
var rename = require('gulp-rename')
gulp.task('js', function() {
var b = browserify({
entries: ['./lib/test.js', './lib/app.jsx'],
transform: [reactify],
extensions: ['.js','.jsx'],
debug: false,
cache: {},
packageCache: {},
fullPaths: false
});
function build(file) {
return b
.external('jquery')
.plugin('minifyify', {
map: false
})
.bundle()
.pipe(source('main.js'))
// Add .min.js to the end of each optimized file
.pipe(gulp.dest('./js/'));
};
build();
});
gulp.task('watch', function() {
gulp.watch("lib/*.jsx", ["js"])
})
gulp.task('default', ['js', 'watch']);
purpose is to convert all jsx to 1 js file.
Is my gulpfile production ready?
Also, how can I simplify the line:
entries: ['./lib/test.js', './lib/app.jsx'],
so that browserify handles all js files in lib/ directory?
If you want some pro-level gulpfiles, check https://github.com/greypants/gulp-starter and the 2.0 branch: https://github.com/greypants/gulp-starter/tree/2.0 . The guy has some nice tricks up his sleeves.
Generally speaking, it's a good practice to go the gulp.src way, see this answer: https://stackoverflow.com/a/25319817/5229638
I am using gulp to compile my typescript files and create the output.js file.
Is it possible to have a single task which compiles typescript file and concatenates it with angular libraries?
Here's what my current file looks like (below). First it's running a typescript task which creates the output.js file and then it runs a scripts task which concats the script plugin files and output.js.
'use strict';
var gulp = require('gulp')
var paths = {
distScriptsDir: '../../Themes/mastter/Scripts',
srcScriptsPlugins: [
'node_modules/jquery/dist/jquery.min.js',
'node_modules/angular/angular.min.js',
'node_modules/angular-route/angular-route.min.js',
'node_modules/angular-translate/dist/angular-translate.min.js',
'node_modules/angular-translate/dist/angular-translate-loader-url/angular-translate-loader-url.min.js',
'node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.js',
'Scripts/angular-sticky.min.js',
'Scripts/dragme.js',
'Scripts/jasny-bootstrap.min.js',
'node_modules/lodash/dist/lodash.min.js',
'node_modules/angular-google-maps/dist/angular-google-maps.min.js'
],
srcScriptsFile: [
'output.js'
]
};
//typescript
gulp.task('typescript', function () {
var ts = require('gulp-typescript');
var tsResult = gulp.src( 'all.ts')
.pipe(ts({
noImplicitAny: true,
out: 'output.js'
}));
return tsResult.js.pipe(gulp.dest(''));
});
// scripts task
gulp.task('scripts', function () {
var concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
uglify = require('gulp-uglify');
return gulp.src(paths.srcScriptsPlugins.concat(paths.srcScriptsFile))
.pipe(plumber({
errorHandler: function (e) {
console.log(e.toString());
this.emit('end');
}
}))
// .pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest(paths.distScriptsDir));
});
// default task
gulp.task('default', [
'typescript',
'scripts'
]);
I use a watch tasks for this that has a bunch of gulp.watch inside it. One for watching the .ts change and run the typescript compiler that will output a js file in whatever location and another gulp.watch that watches the .js files and run script task. In that case, things will get automated by the watch and you don't have to combine the task into one task.
gulp.task('watch', function() {
gulp.watch(['dir/*.ts','otherdir/*.ts',...], ['typescript']);
gulp.watch(['dir/*.js','otherdir/*.js',...], ['scripts']); //make sure to include the .ts result folder...
});
try run-sequence. Below is a simple example.
gulp.task('task1', function(callback) {
setTimeout(function() {
console.log('task1 is done');
callback()
}, 1000);
});
gulp.task('task2', function(callback) {
setTimeout(function() {
console.log('task2 is done');
callback()
}, 2000);
});
gulp.task('tk12', function(callback) {
return runSequence('task1', 'task2', callback);
});
How create flux architecture in asp.net using reactjs.net ?
I will have several files. Jsx, how will I manage to be all rendenizador by the server?
In this example => Link, it creates using asp.net but not render with server
I am currently working on a feature as a test bed for reactjs + flux in our .net application. Here is how it is set up.
We use nodejs as a package manager. we use NodeJs Visual Studio Tools to get the nodejs interactive window in VS and to be able to create NodeJs projects. http://nodejstools.codeplex.com/
Gulp task calls browserify to search through the the root jsx and find all dependencies. Gulp also calls the reactify library is used to transform the jsx files. The concatenated .js file is put on in a directory in our mvc website.
Gulp task copies all relevant js files to the mvc.net project as well.
When developing we use the Visual Studio Task Runner extension to run a Gulp task that watches for changes so we don't have to "keep building" while developing. It uses the "watchify" library.
We use Jest for testing - although we had an issue with NodeJs and jest playing nice in the newest version of NodeJs, so we had to down grade to 0.10.36.
we use TeamCity to run the Gulp task before building our solution (have a test setup, but haven't added it to my new feature yet).
Gulp does most of the magic. Here is a copy of our Gulp file (it is messy, but I am still learning). Many of the tasks are to watch css js and jsx files, but I hope this helps.
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var createbundler = function () {
var bundler = browserify({
entries: ['./app/js/VaeApp.jsx'], // Only need the root js file, browserify finds the dependencies
transform: [reactify], // We want to convert JSX to normal javascript
debug: false, // include sourcemapping for minified scripts?
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
return bundler;
}
gulp.task('js', function () {
var bundler = createbundler();
bundler.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())// <----- convert from streaming to buffered vinyl file object
.pipe(uglify())
// Create the initial bundle when starting the task
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});
gulp.task('js-shim-sham', function () {
gulp.src('./node_modules/es5-shim/es5-*.min.js')
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
console.log("updated shim-sham");
});
gulp.task('js-dev', function () {
var watcher = watchify(createbundler());
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle().pipe(source('bundle.js'))
.pipe(buffer())// <----- convert from streaming to buffered vinyl file object
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())// <----- convert from streaming to buffered vinyl file object
// .pipe(uglify())
// Create the initial bundle when starting the task
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});
var runcss = function () {
var updateStart = Date.now();
gulp.src('./app/css/document/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/css'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
};
var runimages = function () {
var updateStart = Date.now();
gulp.src('./app/img/*.*')
.pipe(gulp.dest('../Mvc.Web/Scripts/Flux/img'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
};
gulp.task('styles', function () {
runcss();
runimages();
});
gulp.task('styles-dev', function () {
runcss();
gulp.watch('./app/css/document/*.css', runcss);
runimages();
gulp.watch('./app/img/*.*', runimages);
});
// Just running the two tasks
gulp.task('build-dev', ['js-dev', 'styles-dev', 'js-shim-sham']);
// Just running the two tasks
gulp.task('build', ['js', 'styles', 'js-shim']);
Check out react-dot-not.
It uses webpack/gulp with ASP.MVC. it supports redux/flux, supports client side routing with react-router, with an F5 at any time to re-render the same page from the server.