I have a JS application which is used watchify.
So, I want to concat result of watchify command w/ some other javascripts files, which are tends to be global (jQuery and so on). Here is my Javascript watchify command.
var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var reactify = require('reactify');
var watchify = require('watchify');
var notify = require("gulp-notify");
var scriptsDir = './scripts';
var buildDir = './build';
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
}
function buildScript(file, watch) {
var props = {entries: [scriptsDir + '/' + file]};
var bundler = watch ? watchify(props) : browserify(props);
bundler.transform(reactify);
function rebundle() {
var stream = bundler.bundle({debug: true});
return stream.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(buildDir + '/'));
}
bundler.on('update', function() {
rebundle();
gutil.log('Rebundle...');
});
return rebundle();
}
gulp.task('build', function() {
return buildScript('main.js', false);
});
gulp.task('default', ['build'], function() {
return buildScript('main.js', true);
});
Here is the task I use for appending javascript files.
return gulp.src([
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/redactor-wysiwyg/redactor/redactor.js',
'./build/main.js' // output of `gulp build`.
]).pipe(concat('application.js'))
.pipe(gulp.dest('./public/'));
How can I concat these javascript files using one function buildScript?
The main key is that nodejs stream has a end event. So,
function rebundle() {
var stream = bundler.bundle({debug: true});
stream.on('end', function() { gulp.start('everything_you_want') });
return stream.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(buildDir + '/'));
}
Related
I have a Gulp task to concatenate JavaScript source files into a single one and minify it:
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile)) // Concat files
.pipe(uglify({})) // Minify
.pipe(gulp.dest(dest)); // Save final file to dest
});
If one of the JavaScript file has a syntactic error, the uglify plugin raise an error. I can check the error, listening to it:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(uglify({}))
.on('error', gutil.log) // Log errors
.pipe(gulp.dest(dest));
});
The error, for example could be:
...
JS_Parse_Error {
message: 'SyntaxError: Unexpected token punc «,», expected punc «:»',
filename: 'final.js',
line: 2204,
col: 25,
pos: 89101,
stack: 'Error\n at new JS_Parse_Error (eva...
Unfortunately I am not able to check the file final.js at line 2204 to see the error ad fix it in the original file. I am not able to do that because the file has not been written to the file system yet.
Sure I can write the file to the disk before calling uglify and inspect it later:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(gulp.dest(dest)) // Save file to disk before uglify it
.pipe(uglify({}))
.on('error', gutil.log)
.pipe(gulp.dest(dest));
});
But in this way I write the same file 2 times and I don't like it (for example, is not very good for performance).
My question is:
Is it possible to write the file to disk only in an error occurs on uglify?
Something like:
var gutil = require('gulp-util');
gulp.task('build', function() {
var destinationFile = 'final.js';
var dest = 'dest/';
return gulp.src('**/*.js')
.pipe(concat(destinationFile))
.pipe(gulp.dest(dest))
.pipe(uglify({}))
.on('error', function(err) {
// ... save content of "dest" file somewhere...
})
.pipe(gulp.dest(dest));
});
Thank you.
I'm new in gulp and i want to write task with browserify. That's my gulpfile.js
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
gulp.task("browserify", function () {
return browserify('src/js/main/main.js').bundle().pipe(source('main.js')).pipe(gulp.det(dest+'js'));
})
And i have error:
TypeError: browserify(...).bundle is not a function
OP solved this issue by using
var browserify = require('browserify');
instead of
var browserify = require('gulp-browserify')
I can't use gulp-browserify. My input file is _/components/js/script.js (this has require('jquery'). I want it to output to _/js/script.js. What's wrong with my configuration? I get a path error.
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
browserify= require('browserify');
gulp.task('watch', function(){
gulp.watch('_/components/sass/*.scss', ['sass']);
});
gulp.task('browserify', function(){
var b = browserify({entries: './_/components/js/script.js', debug: true});
return b.bundle()
.pipe(gulp.dest('./js/'));
});
gulp.task('default', ['sass', 'browserify', 'watch']);
You can't pipe browserify bundle stream like that to a gulp.dest stream. It's expecting a vinyl stream. You could use vinyl-source-stream to transform it. This is very common:
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
var files = ['./js/admin.js', './js/login.js', './js/main.js']
gulp.task('browserify', function(){
var b = browserify(files);
b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('public'))
});
Using gulp-sftp, I can't seem to only upload the file that has changed after CSS minification.
The semi-working snippet below begins by compiling the CSS and then continues to watch for changes in the src dir. It follows on by watching for changes in the dist dir (where minified CSS is stored) in order to upload that file to a web server.
However, this does not work as gulp is uploading everything rather than only the file that has changed and been minified.
var gulp = require('gulp'),
changed = require('gulp-changed'),
minifycss = require('gulp-minify-css'),
sftp = require('gulp-sftp')
;
var src = './src/',
dist = './dist/';
var srcStyles = src + '**/*.css',
distStyles = dist + '**/*.css';
var host = 'ftp.xxxx.xx.xx',
auth = 'keyMain',
remotePath = 'public_html';
gulp.task('compilecss', function(){
gulp.src(srcStyles)
.pipe(changed(dist))
.pipe(minifycss({keepBreaks: true}))
.pipe(gulp.dest(dist))
;
});
gulp.task('uploadcss', function(){
gulp.src(distStyles)
.pipe(changed(dist))
.pipe(sftp({
host: host,
auth: auth,
remotePath: remotePath
}))
;
});
gulp.task('main', function(){
gulp.start('compilecss');
});
gulp.task('watch', function(){
gulp.watch(srcStyles, ['compilecss']);
gulp.watch(distStyles, ['uploadcss']);
});
gulp.task('default', ['main', 'watch']);
No need for two tasks. gulp is file-based which means you should think in pipelines, not tasks.
var gulp = require('gulp'),
changed = require('gulp-changed'),
minifycss = require('gulp-minify-css'),
sftp = require('gulp-sftp');
var src = './src/',
dist = './dist/';
var srcStyles = src + '**/*.css',
distStyles = dist + '**/*.css';
var host = 'ftp.xxxx.xx.xx',
auth = 'keyMain',
remotePath = 'public_html';
gulp.task('compile', function (){
return gulp.src(srcStyles)
.pipe(changed(dist))
.pipe(minifycss({
keepBreaks: true
}))
.pipe(gulp.dest(dist))
.pipe(sftp({
host: host,
auth: auth,
remotePath: remotePath
}));
});
gulp.task('watch', function (){
gulp.watch(srcStyles, ['compile']);
});
gulp.task('default', ['compile', 'watch']);
I'm writing an Angular project with the following the structure:
js/
components/
component1/
component1.directive.js
component1.controller.js
component1.factory.js
component1.rest.service.js
component2/
component2.factory.js
component2.rest.service.js
vendor/
angular/
jquery/
home.js
page2.js
where the components are shared resources and files which reside directly under js/ are packages of required components and vendor libs.
What I want to do with gulp is create a task which will stream the files from each component directory, watch for changes to trigger ngmin() and uglify(), then concat() those files into a '{componentDirectoryName}.package.min.js' file while lives in the component's directory. The result would look something like this:
js/
components/
component1/
component1.directive.js
component1.controller.js
component1.factory.js
component1.rest.service.js
component1.package.min.js
component2/
component2.factory.js
component2.rest.service.js
component2.package.min.js
Current implementation:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ camelize: true});
var glob = require('glob');
var StreamQueue = require('streamqueue');
var publicDir = './src/main/webapp/public/';
var jsDir = publicDir + 'js/';
var components = jsDir + 'components/';
gulp.task('js', function() {
var componentsDirectories = glob.sync(components + '/*/');
var queue = new StreamQueue();
componentsDirectories.forEach(function(directory) {
var componentName = directory.match(/.+\/(.+)\/$/)[1];
queue.queue(
gulp.src([directory + '*.js', '!' + directory + '*-package.min.js'])
.pipe($.ngmin())
.pipe($.jsmin())
.pipe($.concat(componentName + "-package.min.js"))
.pipe(gulp.dest(directory))
);
});
return queue.done().pipe($.livereload());
});
gulp.task('watch', function() {
gulp.watch([components + '**/*.js', '!' + components + '**/*.min.js'], ['js']);
});
gulp.task('default', ['js', 'watch']);
You can use node-glob to get your components' names.
To register multiple sources as a single task you can compose streams with streamqueue.
Here's my solution:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var livereload = require('gulp-livereload');
var glob = require('glob');
var StreamQueue = require('streamqueue');
gulp.task('js', function() {
var componentsFolders = glob.sync('components/*/');
var queue = new StreamQueue();
componentsFolders.forEach(function(folder){
var componentName = folder.match(/.+\/(.+)\/$/)[1];
queue.queue(
gulp.src([folder + '*.js', '!' + folder + '*.package.min.js'])
.pipe(ngmin())
.pipe(uglify())
.pipe(concat(componentName + ".package.min.js"))
.pipe(gulp.dest(folder))
);
});
return queue.pipe(livereload());
});
gulp.task('default', ['js']);