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
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 have this below gulpfile.js. When i run the app using 'gulp start' then it is showing start is not a function.
Glup-cli version i'm using V4.0.0
const gulp = require('gulp');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const scripts = require('./scripts');
const styles = require('./styles');
// Some pointless comments for our project.
var devMode = false;
gulp.task('css', function() {
gulp.src(styles)
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('js', function() {
gulp.src(scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('html', function() {
return gulp.src('./src/templates/**/*.html')
.pipe(gulp.dest('./dist/'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('build', function() {
gulp.start(['css', 'js', 'html'])
});
gulp.task('browser-sync', function() {
browserSync.init(null, {
open: false,
server: {
baseDir: 'dist',
}
});
});
gulp.task('start', function() {
devMode = true;
gulp.start(['build', 'browser-sync']);
gulp.watch(['./src/css/**/*.css'], ['css']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/templates/**/*.html'], ['html']);
});
gulp.start has been deprecated in v4. Depending on your needs, you can use gulp.series or gulp.parallel instead.
- gulp.task('start', function() {
- devMode = true;
- gulp.start(['build', 'browser-sync']);
+ gulp.task('start', gulp.series('build', 'browser-sync'), function(done) {
+ devMode = true;
gulp.watch(['./src/css/**/*.css'], ['css']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/templates/**/*.html'], ['html']);
});
This question is probably a duplicated of this one, but since that question hasn't got an accepted answer I'll just echo Mark's answer.
As Derek said, in v4 of gulp you have to use gulp.series or gulp.parallel;
Another differences for v4 is that you need to explicit when the task is done, you have 6 ways to do it.. I'll link this answer for a really good explanation Gulp error: The following tasks did not complete: Did you forget to signal async completion?
Mohamed explanation might be useful to understand in depth the reasons, you can find both: Migrate gulp.start function to Gulp v4
I have tried the solution but it needed more code, so I will write my main changes here:
gulp.task("build",
gulp.series(gulp.parallel("css", "js", "html"), function (done) {
done();
})
);
gulp.task("start", gulp.series("build", "browser-sync"), function (done) {
devMode = true;
gulp.watch(["./src/css/**/*.css'"], ["css"]);
gulp.watch(["./src/js/**/*.js"], ["js"]);
gulp.watch(["./src/templates/**/*.html"], ["html"]);
done();
});
in all of the other task, I simply added the done() function ( with the exception of the task html because it has a return that already explicit when the task is done)
Hope this will help someone else, have a nice day :)
I took a gulpfile from this location https://github.com/meanjs/mean. My version looks like this, I used a slightly moderated version just to run a dev version:
'use strict';
/**
* Module dependencies.
*/
var _ = require('lodash'),
fs = require('fs'),
defaultAssets = require('./config/default'),
glob = require('glob'),
gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
runSequence = require('run-sequence'),
plugins = gulpLoadPlugins({
rename: {
'gulp-angular-templatecache': 'templateCache'
}
}),
path = require('path'),
endOfLine = require('os').EOL;
// Local settings
var changedTestFiles = [];
// Set NODE_ENV to 'development'
gulp.task('env:dev', function () {
process.env.NODE_ENV = 'development';
});
// Nodemon task
gulp.task('nodemon', function () {
return plugins.nodemon({
script: 'server.js',
nodeArgs: ['--debug'],
ext: 'js,html',
watch: _.union(defaultAssets.server.views, defaultAssets.server.allJS, defaultAssets.server.config)
});
});
// Watch Files For Changes
gulp.task('watch', function () {
// Start livereload
plugins.livereload.listen();
// Add watch rules
gulp.watch(defaultAssets.server.views).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.server.allJS, ['eslint']).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.client.js, ['eslint']).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.client.css, ['csslint']).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.client.sass, ['sass', 'csslint']).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.client.less, ['less', 'csslint']).on('change', plugins.livereload.changed);
gulp.watch(defaultAssets.server.gulpConfig, ['eslint']);
gulp.watch(defaultAssets.client.views).on('change', plugins.livereload.changed);
// }
});
// Run the project in development mode
gulp.task('default', function (done) {
runSequence('env:dev', ['watch', 'nodemon'], done);
});
I got the server working fine but there is nothing showing up on localhost:3000? How can i fix this?
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
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