We Keep Coding

simple setup with gulp - browserify - browsersync: required is not defined

I have this gulp code that works fine with browser-sync and the gulp sass compiler, I've tried to insert a browserify task but seems doesn't work, it works if I type on the command line:
browserify src/js/main.js -o src/js/bundle/bundle.js
this is my project structure:
|-project
|--/src
|---/css
|----style.css
|---/js
|----main.js
|----/bundle
|-----bundle.js
|---/scss
|----_bootstrap.scss
|----style.scss
|---/assets
|----/img
|---index.html
|--gulpfile.js
|--package.json
and this is my gulp file:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const browserify = require('browserify');
gulp.task('sass', () => {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
gulp.task('js',()=>{
return gulp.src('./src/js/main.js')
.pipe(browserify())
.pipe(gulp.dest('./src/js/bundle'))
});
gulp.task('serve', ()=> {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/js/*.js", gulp.series('js'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve','sass','js'));
I have recently added the 'js' task but when I type gulp in the command line everything works fine except for the browserify task.
as a test the main.js file looks like this:
const jquery = require('../../node_modules/jquery')
console.log(jquery)
and I still get the error 'required is not defined'. there is something i missed out. Many thanks

ok, finally works (seems...) it was not a problem with browserify but with the new version of gulp, instead of:
gulp.task('default', gulp.series('serve','sass','js'));
I have had to do:
gulp.task('default', gulp.parallel('serve','sass','js'));
before the sass and js task didn't start, now with parallel function seems works

Gulp not compiling but getting error ReferenceError: runSequence is not defined

Question
What should I modify in my code to get these two tasks to build in sequence?
Background
I have never had this problem before with gulp, but now that I want to run two tasks in sequence, it is not working properly. I have two tasks previously set up.
gulp.task('copyAllFiles', function() {
//PHP files
gulp.src('src/*.php')
.pipe(gulp.dest('dist'));
//childtheme screenshot
gulp.src('src/screenshot.png')
.pipe(gulp.dest('dist'));
});
gulp.task('sass2css', function() {
return gulp.src('src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist'))
});
I then added a "build" task to run both
gulpfile.js
gulp.task('build', function(callback) {
runSequence(['copyAllFiles', 'sass2css'], callback);
});
But now getting this error
ReferenceError: runSequence is not defined

To use runSequence, you'll need to install that dependency and require it into your gulp file:
Install
npm install --save-dev run-sequence
Gulp file
const runSequence = require('run-sequence');

Add bootstrap-sass in fountainjs error

using fountainjs to generate a new angular project, I have issue in adding bootstrap-sass library to my project.
here is the my generate-project flow: Fountain->angular1->bower->babel->sass
then, since I need to use bootstrap, I installed it using bower, and included it in my index.scss with #import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
It works fine when I run gulp serve but when I build it using gulp build, the following error occured:
Error in plugin 'gulp-cssnano' Message: "bower-components/bootstrap-sass/assets/stylesheets/_bootstrap.scss" is not int the SourceMap
So, what goes wrong here and how to fix that?

I'm not certain of the fix, but a workaround that might help you move along is to comment out or remove the sourcemaps usage in your gulp.conf.js. This will allow your sass to compile, but it won't give you sourcemaps for your style code.
Below is the standard gulp.conf.js with the sourcemaps lines commented out.
const gulp = require('gulp');
const browserSync = require('browser-sync');
//const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const conf = require('../conf/gulp.conf');
gulp.task('styles', styles);
function styles() {
return gulp.src(conf.path.src('index.scss'))
//.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'})).on('error', conf.errorHandler('Sass'))
.pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
//.pipe(sourcemaps.write())
.pipe(gulp.dest(conf.path.tmp()))
.pipe(browserSync.stream());
}

On line 17 of /gulp_tasks/styles.js, replace this line:
.pipe(sourcemaps.write())
with:
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
The issue is caused by a bug in gulp-sourcemaps when including files from the node_modules or bower_components folder.

Gulp TypeError: dest.on is not a function

I'm trying to generate a bundle.js file with a Gulp task
var gulp = require('gulp'),
gutil = require('gulp-util'),
wrench = require('wrench'),
conf = require('./webpack.config'),
webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server');
// Webpack
gulp.task('wp', function() {
return gulp.src('./assets/scripts/entry.js')
.pipe(webpack(conf))
.pipe(gulp.dest('./assets/build1'));
});
However, I get TypeError: dest.on is not a function when I try to run it:
Here's the folder directory:

The error occurs because webpack doesn't work natively with gulp streams. Naturally the returned object by webpack() doesn't include dest.on which is specific to gulp.
Either use gulp-webpack or follow the official docs on how to use webpack with gulp
Sample code taken straight out of the official docs which uses webpack-stream:
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});

gulp task finished successfully in usual terminal, but not in the atom terminal

I have one strange issue running gulp task for compiling browserify + coffee, react & bower. Here is my task:
var browserify = require('gulp-browserify');
var coffeeReactify = require('coffee-reactify');
var debowerify = require('debowerify');
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('coffee', function() {
return gulp.src('./app/assets/javascripts/application.coffee', { read: false })
.pipe(browserify({
debug: true,
transform: [coffeeReactify, debowerify],
extensions: ['.coffee']
})).on('error', function(error) {
console.log('----');
console.log('Compile error');
console.log();
console.log(error.message);
}).pipe(rename('application.js'))
.pipe(gulp.dest('./public/'));
});
When I run this task on usual ubuntu's gnome-terminal, all is going well, file is created and worked. But in atom editor terminal coffee isn't compiling. I get this error. So, how can I fix that?
[10:38:15] Using gulpfile ~/my_project/Gulpfile.js
[10:38:15] Starting 'coffee'...
----
Compile error
ENOTDIR: not a directory, open '/usr/share/atom/resources/app.asar/package.json'
[10:38:15] Finished 'coffee' after 57 ms
Other tasks, like gulp slim or gulp sass are working well.

The key to solve this issue was to migrate from gulp-browserify to browserify package.