I have the following task on my gulpfile.js
gulp.task('default', ['browserify'])
gulp.task('browserify', function () {
return browserify('./public/js/x.js')
.bundle()
.pipe(source('y.js'))
.pipe(gulp.dest('./public/dist/js'))
})
But after running $ gulp it gives no output. Am I missing something?
I am not sure what your browserify is but I'm gonna assume it's not the deprecated gulp-browserify.
This should work. I tested it:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream'); // MAKE SURE THIS IS THERE
gulp.task('default', ['browserify'])
gulp.task('browserify', function() {
return browserify('./public/js/x.js').bundle() // .bundle is a browserify function
.pipe(source('y.js')) // Pass to output using vinyl-source-stream
.pipe(gulp.dest('./public/dist/js'));
});
Since my code looks exactly as yours, can you make sure you have vinyl installed?
npm install --save vinyl-source-stream
and if you haven't already:
npm install --save gulp browserify
npm install -g gulp
I'm now maintaining a repository which collecting all the gulp tasks I use in daily work.
This is the browserify task code
var gulp = require('gulp')
var gulpif = require('gulp-if')
var browserify = require('browserify')
var gutil = require('gulp-util')
var through2 = require('through2')
var watchify = require('watchify')
var assign = require('object-assign')
var babelify = require('babelify')
var config = require('config').gulp
module.exports = function (is_dev) {
var options = {
paths: [config.src.js]
}
if (is_dev) {
options = assign({}, options, {
debug: true,
cache: {},
packageCache: {}
})
}
var bundler = function () {
return through2.obj(function (file, enc, next) {
var b = browserify(file.path, options)
.transform(babelify.configure({
presets: ['es2015', 'react'],
compact: false
}))
if (is_dev) {
b = watchify(b)
b.on('update', bundle)
b.pipeline.on('file', function (filename) {
gutil.log(gutil.colors.green('Bundled: '), filename)
})
}
return b.bundle(function (err, res) {
if(err) {
return next(err)
}
file.contents = res
next(null, file)
})
})
}
function bundle() {
is_dev ? gutil.log(gutil.colors.yellow('Bundling...')) : null
return gulp.src([
config.src.js + '/**/*.js',
'!' + config.src.js + '/lib/**/*.js'
])
.pipe(bundler())
.on('error', function(e) {
gutil.log(gutil.colors.red(e.message))
is_dev ? this.emit('end') : null
})
.pipe(gulp.dest(config.dist.js))
}
return bundle()
}
Related
I have upgraded Gulp to version 4 and I am receiving errors when doing gulp build because my gulpfile.js is outdated. I need help changing the syntax on my gulpfile.js from Gulp v3 to Gulp v4. Your help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var gutil = require("gulp-util");
var useref = require('gulp-useref');
var runSequence = require('run-sequence');
var del = require('del');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var injectVersion = require('gulp-inject-version');
gulp.task('sass', function(){
return gulp.src('src/scss/log.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});
gulp.task('images', function(){
return gulp.src('src/images/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
gulp.task('webpack', function(){
return gulp.src('src/main.js')
.pipe(webpackStream( webpackConfig ))
.pipe(injectVersion())
.pipe(gulp.dest('src/js/'));
});
gulp.task('useref', function(){
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('move:js', function(){
return gulp.src([
'src/js/config.js.example',
'src/js/worker.online.js',
'src/js/worker.queue.js'
])
.pipe(gulp.dest('dist/js'))
});
gulp.task('clean:dist', function() {
return del.sync('dist');
});
gulp.task('watch', ['sass', 'webpack'], function(){
gulp.watch('src/scss/*', ['sass']);
gulp.watch('src/components/**/*.vue', ['webpack']);
gulp.watch('src/*.js', ['webpack']);
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['webpack', 'sass', 'images'],
'useref',
'move:js',
callback
)
});
gulp.task('default', ['webpack-dev-server', 'watch']);
............................................................
In vertion 4, The way you define dependent task has been changed. Here is the smaple.
// V3
gulp.task('default', ['del'], function() {
// default task code here
});
// v4
gulp.task('default', gulp.series('del', function() {
// default task code here
}));
//v3
gulp.task('default', ['scripts', 'styles'], function() {...});
// v4
gulp.task('default', gulp.parallel('scripts', 'styles'));
More info:
https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/
https://fettblog.eu/gulp-4-parallel-and-series/
Just started learning gulp and followed this tutorial series:https://www.youtube.com/watch?v=oRoy1fJbMls&list=PLriKzYyLb28lp0z-OMB5EYh0OHaKe91RV
It works perfectly on gulp 3 but after updating npm to the current version it broke down and i tried converting my gulpfile.js from version 3 to 4, and after running the gulp command i have this error:
The following tasks did not complete: default, Did you forget to signal async completion? How do i solve this?
Here's my gulpfile:
const gulp = require('gulp');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
let styleSource = 'src/scss/style.scss';
let styleDestination = './build/css/';
let styleWatch = 'src/scss/**/*.scss';
let jsSource = 'main.js';
let jsFolder = 'src/js/';
let jsDestination = './build/js/';
let jsWatch = 'src/js/**/*.js';
let jsFILES = [jsSource];
let htmlWatch = '**/*.html';
/* Converting Sass to CSS */
gulp.task('styles',function(){
return gulp.src(styleSource)
.pipe(sourcemaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({suffix:'.min'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDestination));
});
/* Converting ES6 to Vanilla JS */
gulp.task('js',function(){
return jsFILES.map(function(entry){
return browserify({
entries: [`${jsFolder}${entry}`]
})
.transform(babelify, {presets:['env']})
.bundle()
.pipe(source(entry))
.pipe( rename({extname:'.min.js'}) )
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(jsDestination))
});
})
// default task to run all tasks
const compile = gulp.parallel(['styles','js']);
compile.description = 'Compile all styles and js files';
gulp.task('default', compile);
// watch default
const watch = gulp.series('default', function(){ // ,'browser-sync'
// keep running, watching and triggering gulp
gulp.watch(styleWatch, gulp.parallel('styles')); //, reload
gulp.watch(jsWatch, gulp.parallel('js')); //, reload
gulp.watch(htmlWatch);
});
watch.description = 'watch all changes in every files and folders';
gulp.task('watch', watch);
And here's the error after i run gulp:
Your js task returns an array, gulp doesn't understand that. A task can return a stream or a promise - or it must call the callback parameter to signal completion, like so:
gulp.task('js', function(cb) {
// Your js task code here
cb();
})
Also, read the latest gulp4 documentation.
I used gulp with broswersync, to watch any front end changes. But in the same time I'm using node.js so I need nodemon to restart server if I changed anything on the server side. Not sure I'm doing it right, below is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('serve', function() {
browserSync.init({
server: "./public"
});
gulp.watch(['./public/*.html', './public/js/*.js']).on('change', reload);
});
gulp.task('sass', function () {
return gulp.src('./public/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream: true}));
});
gulp.task('sass:watch', function () {
gulp.watch('./public/sass/**/*.scss', ['sass'])
});
// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: './bin/www',
ext: 'js',
ignore: ['public/*'],
env: {
'NODE_ENV': 'development',
'DEBUG': 'appname:*'
}
}).on('start', function () {
if (!started) {
cb();
started = true;
}
})
.on('crash', function() {
console.log('nodemon.crash');
})
.on('restart', function() {
console.log('nodemon.restart');
})
.once('quit', function () {
process.exit();
});
});
gulp.task('default', ['serve','sass','sass:watch','nodemon']);
I run gulp but it has error of
Error: listen EADDRINUSE :::3000
This is my directory structure:
I set up my workstation, and I set up my Gulp File to work on my folder format, but it is not working properly.
This is my Gulp File:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed'),
browserSync = require('browser-sync'),
livereload = require('gulp-livereload'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
watch = require('gulp-watch');
gulp.task('sass', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
gulp.task('compress', function() {
gulp.src('./app/*.js')
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('script.min.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('jpg', function() {
gulp.src('./template/img/**/*.*')
.pipe(changed('./dist/img/'))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./dist/img/'));
});
gulp.task('browser-sync', function() {
browserSync.init(['./dist/css/**', 'index.php'], {
server: {
baseDir: './',
index: 'index.php'
}
});
});
gulp.task('watch', ['sass', 'browser-sync','compress'], function () {
return watch('./app/template/css/style_v1.scss', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(gulp.dest('build'));
});
});
When I run gulp watch it returns this:
(node:6668) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[08:42:23] Using gulpfile /var/www/html/evandro/sistema_metas/gulpfile.js
[08:42:23] Starting 'sass'...
[08:42:23] 'sass' errored after 7.09 ms
[08:42:23] Error: must provide pattern
What is the problem?
I have another code, the CSS Watch does not work, just watch HTML, What can it be?
gulp-ruby-sass works differently from other gulp plugins. You don't pass it to .pipe(). If you take a look at the documentation it says the following:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means you have to use it like this:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
return sass('./app/template/css/style_v1.scss')
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
Alternatively you can use the gulp-sass plugin instead of gulp-ruby-sass. It doesn't use the Ruby implementation of SASS, but rather the C implementation (libsass). It allows you to use .pipe() as you normally would for most other gulp plugins:
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
runsequence is the code below is not quite working?
var gulp = require('gulp');
var del = require('del');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');
gulp.task('clean', function(cb) {
console.log('YOLO1');
del(['build/*'], cb);
});
gulp.task('copy', function() {
console.log('YOLO2')
return gulp.src('client/www/index.html')
.pipe(gulp.dest('build'));
});
gulp.task('browserify', function() {
console.log('YOLO3')
return gulp.src('client/index.js')
.pipe(browserify({transform: 'reactify'}))
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
gulp.task('build', function(cb) {
console.log('YOLO4')
runSequence('clean', 'browserify', 'copy', cb);
});
gulp.task('default', ['build'], function() {
gulp.watch('client/*/*', ['build']);
nodemon({ script: './bin/www', ignore: ['gulpfile.js', 'build', 'client', 'dist'] });
});
Current Output:
YOLO4,
YOLO1
DESIRED Output:
YOLO4,
YOLO1,
YOLO3,
YOLO2
I am not sure why runSequence is only executing the first task and unable to execute the rest? any ideas?
del does not take a callback, but returns synchronously: (see first sample in https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md)
gulp.task('clean', function() {
console.log('YOLO1');
return del(['build/*']);
});