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'))
});
Related
Im trying to minify JS files with Gulp, but what is happening is that it copies all the original files im trying to minify to the destination folder /minify whereas I want there to be only the minified files with the extension -min.js.
var gulp = require('gulp');
var minify = require('gulp-minify');
var stripDebug = require('gulp-strip-debug')
var strip = require('gulp-strip-comments')
gulp.task('min-js', function() {
return gulp.src('./**/*.js', '!./node_modules', '!./*-min.js')
.pipe(minify({
ignoreFiles: ['gulpfile.js', './node_modules']
}))
.pipe(stripDebug())
.pipe(gulp.dest('./minify'))
});
gulp.task('watch', function(){
gulp.watch('lib/scripts/*.js', ['min-js']);
});
gulp.task('default', gulp.series('min-js', 'watch'));
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 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 + '/'));
}
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']);