I am using watchify with gulp. When using notepad++ to edit source code, watchify works fine, but it does nothing when I edit with Jetbrain Webstorm 8.
Here is my gulpfile:
var browserify = require('browserify');
var watchify = require('watchify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
gulp.task('watchify', function(){
var bundler = browserify('./app/js/app.js', {
debug: true,
cache: {},
packageCache: {}
fullPaths: true
});
var watcher = watchify(bundler);
return watcher.on('update', function () { // When any files update
console.log('Updating!');
var updateStart = Date.now();
watcher.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
});
Is there anyway to make watchify work with Webstorm ?
Thanks for any help.
I posting this just for the sake of future searchers - I think the cause of that problem is Enabled "Use safe write". After disabling problems seems to disappear.
https://github.com/substack/watchify/issues/179
Related
I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice
I have the following gulpfile
gulp.task('browserify', function() {
bundle(false);
});
gulp.task('browserify-watch', function() {
bundle(true);
});
function bundle (performWatch) {
var bify = (performWatch === true
? watchify(browserify(finalBrowserifyOptions))
: browserify(finalBrowserifyOptions));
if (performWatch) {
bify.on('update', function () {
console.log('Updating project files...');
rebundle(bify);
});
}
bify.transform(babelify.configure({
compact: false
}));
function rebundle(bify) {
return bify.bundle()
.on('error', function () {
plugins.util.log('Browserify error');
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(paths.build + assets.js));
}
return rebundle(bify);
}
The trouble is that gulp browserify works just fine. However, gulp browserify-watch detects the changes but the output never gets updated.
What am I doing wrong?
I encountered the same watchify failures in file-change detection (both with gulp and grunt). CLI watchify works as expected though. For example:
watchify ./src/app.js -t babelify --outfile ./build/bundle.js -v
Currently I switched to browserify-incremental. The perspective is different in regards to watchify approach. Here's the paragraph from their Github page which encopasses it best:
browserify-incremental can detect changes which occured in between
runs, which means it can be used as part of build systems which are
invoked on demand, without requiring a long lived process. Whereas
watchify is slow for the first run upon each startup,
browserify-incremental is fast every time after the very first.
Here's the "translated" CLI command to make use of browserify-incremental:
browserifyinc ./src/app.js -t babelify --outfile ./build/bundle.js -v
Here's a simple gulpfile.js script for watching and [re]bundling:
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var babel = require('babelify');
var browserifyInc = require('browserify-incremental');
var bundleApp = function() {
var browserifyObj = browserify('./src/app.js', { debug: false, cache: {}, packageCache: {}, fullPaths: true }).transform(babel);
var bundler = browserifyInc(browserifyObj, {cacheFile: './browserify-cache.json'});
bundler.on('time', function (time) {
console.log('-> Done in ' + time/1000 + ' ms');
});
console.log('-> Bundling...');
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build'));
};
gulp.task('browserify', function () {
gulp.watch('./src/**/*.js', function () {
return bundleApp();
});
});
gulp.task('default', ['browserify']);
Looks like everything was fine my IDE, Webstorm, was caching the file. When I looked at the actual file on the box it was fine.
I am trying to work to replicate a problem I am having adding React to an existing application. Unfortunately, at the moment I am running into a completely different problem simply trying to reproduce the original problem.
The basic structure is a new base module compiled by browserify that is then concatenated with the existing module which bootsraps the application for now.
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
gulp.task('default', ['browserify', 'concat']);
gulp.task('browserify', function(){
return browserify({
entries: ['./src/app.js'],
transform: [["reactify", {"es6": true}]],
extensions: ['.jsx'],
debug: true,
standalone: 'App'
}).bundle()
.pipe(source('browserifyPackage.js'))
.pipe(gulp.dest('./oldSrc'));
})
gulp.task('concat', ['browserify'], function(){
return gulp.src(['./oldSrc/browserifyPackage.js', './oldSrc/app.js'])
.pipe(concat('app.js'))
.pipe(gulp.dest('./'));
})
the new module is pretty simple
window.React = require('react');
module.exports = {
TodoSection: require('./todoSection')
}
And then the old app looks like this
_.extend(App, (function(){
return { init: function(){
React.render(new App.TodoSection(), document.getElementById('body'));
}}
}))
window.addEventListener('load', function() { App.init(); }, false).
When I try to use this file though I get an "Unexpected end of line" from within prelude.js in browserify. I don't see an obvious problem, but I am obviously missing something.
The complete example project can be found on Github
The issue is probably the period at the end of this line:
window.addEventListener('load', function() { App.init(); }, false).
I'm trying to set up a gulp task to process rem unit automatically and add a pixel fallback.
Here is my gulfile.js:
// NPM install gulp gulp-less gulp-watch gulp-plumber gulp-livereload gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var pixrem = require('gulp-pixrem');
gulp.task('less', function() {
var processors = [
autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
mqpacker,
csswring({
preserveHacks: true,
removeAllComments: true
})
];
gulp.src('./style.less') // only compile the entry file
.pipe(plumber())
.pipe(less({
paths: ['./','./vendors/', './layouts', './partials/', './overrides/']
} ))
.pipe(pixrem('10px'))
.pipe(postcss(processors))
.pipe(plumber.stop())
.pipe(gulp.dest('./'))
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch('./**/*.less', ['less']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']); // Default will run the 'entry' watch task
The task is now running and converting rems to pixel fallbacks thanks to gulp-pixrem.
The thing I can't seem to enable is switching the default root value. .pipe(pixrem('10px')) or .pipe(pixrem({rootvalue: '10px'}) doesn't change the base unit conversion.
.pipe(pixrem({ rootvalue: '10px' })) actually return an error TypeError in plugin gulp-pixrem Cannot read property '1' of null
Edit
Don't mind me.
.pipe(pixrem(100%)) is working fine.
End Edit
.pipe(pixrem(100%)) is working fine
I'm trying to execute a shell command at the end of a series of gulp tasks. I noticed that the changes written to the project's files aren't being written before the shell command picks up some of the files and copies them elsewhere. I'm using gulp-shell to execute my shell commands.
I found that if I executed a 'ls' command before my file copy, there's enough of a delay that the files are all written before I try to copy them. Is there a cleaner way to do this?
Here's the gruntfile:
var gulp = require('gulp');
var shell = require('gulp-shell');
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
//Uncomment out this line before going to production
//var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
// JS hint task
gulp.task('jshint', function() {
gulp.src('./code/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './code/img/**/*', imgDst = './www/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './code/*.html', htmlDst = './www';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./code/js/index.js', './code/js/*.js'])
.pipe(concat('script.js'))
//Uncomment out this line before going to production
//.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./www/'));
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./code/css/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./www/'));
});
gulp.task('prepare', shell.task(['ls', 'cordova prepare']));
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'prepare'], function() {
});
It's the prepare task - when it runs, the other files haven't finished executing yet.
It seems that I can set a dependent task that must finish before my prepare:
gulp.task('prepare', [styles], shell.task(['ls', 'cordova prepare']));
I haven't tested it, but I expect this will work?
Try gulp-run-sequence Gulp tasks are Async and this enables them to fire synchronously. Should solve your issue.