Develop Reference

Gulp watch doesn't do anything

I'm trying to use Watch to compile my SASS files, but it doesn't work.
Package.json
"author": "José Ramón Rico Lara",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-notify": "^3.2.0",
"gulp-sass": "^4.1.0",
"gulp-webp": "^4.0.1"
}
}
Gulpfile.js
const { series, src, watch, dest, parallel } = require('gulp');
const sass = require('gulp-sass')
const webp = require('gulp-webp');
const paths = {
scss: 'src/scss/**/*.scss',
js: 'src/js/**/*.js'
}
function css() {
return src(paths.scss)
.pipe(sass())
.pipe(dest('./build/css'))
}
function javascript() {
return src(paths.js)
.pipe(concat('bundle.js'))
.pipe(dest('./build/js'))
}
function watchArchivos() {
watch(paths.scss, css); // * = La carpeta actual - ** = Todos los archivos con esa extensión
watch(paths.js, javascript);
}
exports.css = css;
exports.javascript = javascript;
exports.watchArchivos = watchArchivos;
exports.default = series(css, javascript, watchArchivos);
In the console it says, that the code is running and there isn't any issue, but when I change any file it doesn't compile it.

As far as I can tell there are no gulp.tasks... in example
gulp.task('watch', function() {
gulp.watch('public/assets/css/*.css', gulp.series('clean-css', 'pack-css'));
});
Also in the file you've supplied there's just exports, and you're not calling " watchArchivos".

Had a similar problem, the watching task never got executed, the first task in this case (browser) was a browser sync instance, in my case the browser task was asynchronous, so I had to use asyn / await and everything worked fine.
From:
function browser() {
browserSync.init({
server: {
baseDir: PATHS.output,
},
});
}
exports.default = series (browser, watching);
To
async function browser() {
await browserSync.init({
server: {
baseDir: PATHS.output,
},
});
}

Prevent gulp uglify from stripping out es6

I'm using gulp babel to compile es6, but it seems like uglify is stripping out my es6 altogether. I'm not getting any errors in my command line when this runs. Any ideas why this is getting stripped out?
My gulp task looks like this:
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/js'));
});
My javascript:
document.addEventListener('DOMContentLoaded', function (event) {
console.log('ready to es6!');
const foo = 4;
});
The outputted, compiled/uglified javascript:
"use strict";document.addEventListener("DOMContentLoaded",function(e){console.log("ready to es6!")});
//# sourceMappingURL=scripts.js.map
Notice the const foo = 4 is left out. Removing the .pipe(babel()) results in the const getting compiled properly.
If it's helpful, devDependencies:
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"browser-sync": "^2.26.3",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0-beta.2",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"node-sass": "^4.11.0"
}

UglifyJS (a dependency of gulp-uglify) has a Compress option that by default removes unused vars. Since you never reference foo it is removed from the compressed source.
From UglifyJS2 docs:
Compress options:
unused (default: true) -- drop unreferenced functions and variables (simple direct variable assignments do not count as references unless set to "keep_assign")
Since const foo = 4 is a simple direct variable assignment it doesn't appear in your compressed code. You can either assume you don't need the unused code or adjust your gulp file as such:
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(uglify({
compress: {
unused: false
}
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/js'));
});

Javascript 6to5 (now Babel) export module usage

I'm still a beginner, i try to to export and import one class into a main file, the other class in the others class file and use them.
And then gulp ES5 code with 6to5 (now Babel).
// file a.js
import B from 'b.js';
class A {
constructor() {
B.methodB();
}
}
export default A;
// file b.js
class B {
methodB() {
console.log('hi from b');
}
}
export default B;
// file main.js
import A from 'a.js';
new A();
My gulpfile:
var gulp = require('gulp');
var to5 = require('gulp-6to5');
gulp.task('default', function () {
return gulp.src('main.js')
.pipe(to5())
.pipe(gulp.dest('dist'));
});
And this is my dist/main.js file:
"use strict";
var _interopRequire = function (obj) {
return obj && (obj["default"] || obj);
};
var A = _interopRequire(require("a.js"));
new A();
The error in console: ReferenceError: require is not defined
Which of course does not work ... what am I doing wrong or what lack I yet? I do not get it exactly.

I was having the exact same problem before myself... As Qantas mentioned in the comments, Babel (formerly 6to5) will convert syntax, but it won't do module loading or polyfills.
I've found the easiest workflow is using browserify with gulp. This takes care of transpiling, adding polyfills, bundling, minification, and source map generation in one hit. This question has a pretty nice example: Gulp + browserify + 6to5 + source maps.
This version adds minification and polyfills. An example for your case would look like this:
let gulp = require('gulp');
let browserify = require('browserify');
let babelify = require('babelify');
let util = require('gulp-util');
let buffer = require('vinyl-buffer');
let source = require('vinyl-source-stream');
let uglify = require('gulp-uglify');
let sourcemaps = require('gulp-sourcemaps');
gulp.task('build:demo', () => {
browserify('./demo/app.js', { debug: true })
.add(require.resolve('babel-polyfill/dist/polyfill.min.js'))
.transform(babelify.configure({ presets: ['es2015', 'es2016', 'stage-0', 'stage-3'] }))
.bundle()
.on('error', util.log.bind(util, 'Browserify Error'))
.pipe(source('demo.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify({ mangle: false }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./demo'));
});
gulp.task('default', ['build:demo']);
It's important that uglify has mangle set to false; it really doesn't seem to play nice with the transformed code.
If you don't have all the dependencies installed, you may want to create a package.json file, and ensure that following packages are defined in the dependencies object:
"devDependencies": {
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.13.0",
"babel-preset-es2016": "^6.11.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-3": "^6.11.0",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"gulp": "^3.9.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
Most of these won't work if installed with -g, so consider yourself warned :P
Then, just run npm install to install all the dependencies, and gulp to run the default task and transpile all of your code.
Your other files look good, you have the right idea with importing at the beginning of each file and exporting your defaults :) If you want some examples of babelified ES6 in the wild, I have a couple of projects on GitHub that might help.

It's seems you need to import the requirejs fond in your HTML like that:
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
And your files need to be something like that:
// file a.js
import B from './b';
class A {
constructor() {
B.methodB = function() {
};
}
}
export default A;
// file b.js
class B {
methodB() {
console.log('hi from b');
}
}
export default B;
// main.js
import A from './a';
new A();
Note that you need to put the module's directory ./a and ./b on the import.
And your gulpfile need to be:
var gulp = require('gulp');
var to5 = require('gulp-6to5');
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(to5())
.pipe(gulp.dest('dist'));
});
Note that you need to transform all of your file with src/*.js on the gulp.src

BrowserSync in Gulp is reloading browser but live stream css doesn't update browser

I've set up a local copy of my wordpress site, and hooked in Gulp to compile .less, JS, etc. When I save off my .php the browser updates, but when I save the .less file, the .css gets compiled, but the browser doesn't update.
When I use this same gulp file on a different site it all works perfectly.
Can anyone tell me what might be blocking BrowserSync from updating css changes (but html/php changes update fine), and would affect certain sites, but not others? (I'm using OSX Yosemite & Chrome browser FYI).
Here's my gulpfile:
/* config */
var PROXY_ADDR = 'playitinteractive.dev',
ASSET_PATH = 'html/wp-content/themes/playitinteractive/assets';
var globs = {
js: [
ASSET_PATH + '/js/src/**/*.js',
],
less: [
ASSET_PATH + 'css/less/**/*.less',
],
files: [
'**/.htaccess',
'**/*.+(html|php|jpg|jpeg|gif|png)',
],
};
var dests = {
js: ASSET_PATH + '/js',
less: ASSET_PATH + '/css',
}
/* includes */
var gulp = require('gulp'),
gutil = require('gulp-util'),
rename = require('gulp-rename'),
// watching
browserSync = require('browser-sync'),
// js
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
ngAnnotate = require('gulp-ng-annotate'),
// css
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css');
/* tasks */
gulp
// build
.task('js', function(){
return gulp.src(globs.js)
.pipe(concat('base.js'))
.pipe(ngAnnotate())
.pipe(gulp.dest(dests.js))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(dests.js))
.pipe(browserSync.reload({stream:true}));
})
.task('less', function(){
return gulp.src(globs.less.concat(['!' + ASSET_PATH + '/less/**/*.inc.less']))
.pipe(less())
.pipe(autoprefixer('last 2 versions'))
.pipe(minifyCss())
.pipe(gulp.dest(dests.less))
.pipe(browserSync.reload({stream:true}));
})
.task('build', ['js','less'])
// watch
.task('js.watch', ['js'], function(){
gulp.watch(globs.js, ['js']);
})
.task('less.watch', ['less'], function(){
gulp.watch(globs.less, ['less']);
})
.task('watch', ['js.watch','less.watch'], function(){
browserSync.init({
files: globs.files,
proxy: PROXY_ADDR,
watchOptions: {debounce: 400},
ghostMode: false,
notify: false,
open: !! gutil.env.open, // call `gulp --open` to start gulp and also open a new browser window
});
})
// default
.task('default', ['watch'])
{
"devDependencies": {
"browser-sync": "^1.3.0",
"gulp": "^3.8.6",
"gulp-autoprefixer": "0.0.8",
"gulp-concat": "^2.3.4",
"gulp-less": "^1.3.3",
"gulp-minify-css": "^0.3.7",
"gulp-ng-annotate": "^0.2.0",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^0.3.1",
"gulp-util": "^3.0.0"
}
}

Found the issue- gulp doesn't reload the page when watching .css/.less changes (it only live updates that specific file)- in my main theme folder styles.css loaded my actual .css with
#import url("assets/css/base.css");
Since the page doesn't refresh all files, this #import never loaded the new base.css into itself.
To fix this I added a second gulp-concat task to manually add base.css into the file instead of an #import rule (the second concat doesn't minify, thus preserving theme information).

Gulp Filter with SourceMaps

I had a similar question here that has merged into a bit more research on my part and a new way this could work.
Basically I'm trying to have all of my .js and .coffee files within one gulp.src() object and based on the extension, do relevant tasks.
What started off with gulp-if has turned into me using gulp-filter which I prefer honestly. The catch I'm running into right now is getting this all to work with gulp-sourcemaps. The current task seems to override the other -- but I'd ultimately like everything to be concatenated in one file, source-mapped in another and have each file extension run its respective tasks. You'll see the uglify task is commented out; as that's what keeps yelling at me; without a whole bunch to go off of. When I do get the filters to work and I have a CoffeeScript error, I noticed that coffeescriptlint() will do its job, but then my watch command; while still running, doesn't respond to anything.
It seems like I might be going down the path of extracting each sourcemap using something like gulp-extract-sourcemap, but am not sure if that's the right way to go.
Normally I'd separate out the JS and Coffeescript task, but I have so many things co-mingling between the two that bringing them together with a simple filter seemed logical -- especially as I'm trying to figure out the sourcemaps for both.
I feel like this one is pretty close, so any nudges in the right direction would be greatly appreciated. Included current gulpfile.js and package.json if you want to spin it up. Thanks!
Gulpfile.js
// Load plugins
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
coffee = require('gulp-coffee'),
changed = require('gulp-changed'),
coffeelint = require('gulp-coffeelint'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
notify = require('gulp-notify'),
concat = require('gulp-concat'),
filesize = require('gulp-size'),
livereload = require('gulp-livereload'),
duration = require('gulp-duration'),
gutil = require('gulp-util'),
gFilter = require('gulp-filter');
gulp.task('scripts', function() {
var jsBuildDir = 'assets/js/build/',
jsFilter = gFilter('**/*.js'),
coffeeFilter = gFilter('**/*.coffee');
return gulp.src([
'assets/js/src/_init.coffee',
'assets/js/src/_init.js'
])
.pipe(coffeeFilter)
.pipe(coffeelint().on('error', gutil.log))
.pipe(coffeelint.reporter())
.pipe(sourcemaps.init())
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(sourcemaps.write('../../maps'))
.pipe(coffeeFilter.restore())
.pipe(jsFilter)
.pipe(jshint({
'boss': true,
'sub': true,
'evil': true,
'browser': true,
'globals': {
'module': false,
'require': true
}
}),
jshint.reporter('jshint-stylish'))
.pipe(jsFilter.restore())
.pipe(concat('scripts.min.js'))
//.pipe(uglify())
.pipe(filesize({
title: 'Scripts:'
}))
.pipe(gulp.dest(jsBuildDir))
.pipe(duration('building script files'))
.pipe(notify({ message: 'Coffeescript task complete' }));
});
// Default task
gulp.task('default', ['scripts']);
// Watch
gulp.task('watch', function() {
gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['scripts']);
// Create LiveReload server
var server = livereload();
// Watch files in patterns below, reload on change
gulp.watch(['assets/js/build/*']).on('change', function(file) {
server.changed(file.path);
});
});
Package.json
{
"devDependencies": {
"gulp": "^3.8.8",
"gulp-changed": "^1.0.0",
"gulp-coffee": "^2.2.0",
"gulp-coffeelint": "^0.4.0",
"gulp-concat": "^2.4.0",
"gulp-duration": "0.0.0",
"gulp-filter": "^1.0.2",
"gulp-jshint": "^1.8.4",
"gulp-livereload": "^2.1.1",
"gulp-notify": "^1.6.0",
"gulp-size": "^1.1.0",
"gulp-sourcemaps": "^1.2.2",
"gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.1",
"jshint-stylish": "^0.4.0"
}
}

I guess you wrapped the sourcemaps.init() and sourcemaps.write() around the wrong section of your pipe. I put the commands where I assume they belong. See below.
I used gulp-filter quite a few times as well. However, I kept it to a minimum to not overcomplicate things. I found run-sequence very helpful. (Also check out some of my gulpfiles here and here.)
Your scenario I would approach like this:
var runSequence = require('run-sequence');
// ...
gulp.task('scripts', function (done) {
runSequence('lint', 'build', done);
});
gulp.task('lint', function (done) {
runSequence('lint-coffee', 'lint-js', done);
});
gulp.task('lint-coffee', function () {
// Just lint your coffee files here...
});
gulp.task('lint-js', function () {
// Just lint your js files here...
});
gulp.task('build', function () {
return gulp.src([
'assets/js/src/_init.coffee',
'assets/js/src/_init.js'
])
.pipe(coffeeFilter)
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(coffeeFilter.restore())
.pipe(sourcemaps.init())
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write('../../maps'))
.pipe(gulp.dest(jsBuildDir));
});