Gulp not creating js sourcemaps file - gulp

for some reason gulp not creating source maps file for concated and uglified js.
I tried different options and setups but with no luck.
I was working at one moment but than it stop working. Not sure why.
Here is the gulp task:
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
clean = require('gulp-clean'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
runSequence = require('run-sequence'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs');
// Configure sass
gulp.task('sass', () => {
return gulp.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write('sourceMap'))
.pipe(gulp.dest('web/css'))
});
// Configure autoprefixer
gulp.task('autoprefixer', () => {
gulp.src(['web/css/**/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('web/css/'))
});
// Configure clean task
gulp.task('clean:css', () => {
gulp.src('web/css/*.css')
.pipe(clean())
});
// Configure css min
var cssMinifyLocation = ['web/css/*.css', '!web/css/*.min.css'];
gulp.task('css:min', () => {
return gulp.src(cssMinifyLocation)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename(
{suffix: '.min'}
))
.pipe(gulp.dest('web/css'))
});
// Configure jsconcat and jsmin
gulp.task('compilejs', function()
{
gulp.src(
[
'web/js/twigjs/**/*.js'
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/js'));
});
// Configure watch
gulp.task('watch', () => {
gulp.watch('sass/**/*.scss', () => { runSequence('clean:css', 'sass',
'autoprefixer', ['css:min']) });
gulp.watch('web/js/twigjs/**/*.js', () => {runSequence('compilejs')});
});
// Run build task
gulp.task('build', (callback) => {
runSequence('clean:css', 'sass', 'autoprefixer',
['css:min'], callback);
});
Please advise, and provide feedback.
Or if you have suggestion what to do in some different way.

Try this code:
gulp.task('compilejs', function()
{
gulp.src(
[
'web/js/twigjs/**/*.js'
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/js'));
});

Related

upgrading gulp from 3 to 4 - Task function must be specified error - what to do?

I had a simple javascript webpage and used gulp 3. Now (as I understand) node 10 crashes with gulp 3 so that ive upgraded to gulp 4. I have a very limited knowledge about gulp and read tutorials now on how to upgrade and I am still getting error: Task function must be specified.
Any help would be great. thanks!!
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
When converting to gulp 4, all Task arrays:
gulp.task('minify-css', ['sass'], function (done) {
should be using series:
gulp.task('minify-css', gulp.series('sass', function (done) {
final file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
}));
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
watch task:
gulp.task('watch', function (done) {
gulp.watch('scss/*.scss', gulp.series('sass'));
gulp.watch('css/!*.css', gulp.series('minify-css'));
gulp.watch('js/!*.js', gulp.series('minify-js'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**/!*.js', browserSync.reload);
return
});
I tried using function instead gulp.task() and it worked for me. I found this solution in a youtube video
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;

Live reload is not working after upgrading to Gulp 4

My gulpfile.js looks like below,
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function () {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
});
gulp.task('html', function () {
return gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.pipe(connect.reload())
});
gulp.task('css', function () {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'client/scss/*.scss'])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(gulp.dest('build/css'))
.pipe(connect.reload())
});
gulp.task('images', function () {
return gulp.src(['client/assets/**/*.*'])
.pipe(gulp.dest('build/assets'))
.pipe(connect.reload())
});
gulp.task('js', function () {
return gulp.src('client/javascript/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
.pipe(connect.reload())
});
gulp.task('watch', gulp.parallel('html', 'css', 'js'));
gulp.task('default', gulp.series('connect', 'watch', 'html', 'css', 'images', 'js'));
When I run this code, I do not get any error on console, but also things do not auto reload on browser. I did this right with previous versions of Gulp, but unable to run it with Gulp 4 somehow. Now whenever I stop the server, I get below error,
[18:44:35] The following tasks did not complete: default, connect
[18:44:35] Did you forget to signal async completion?
Any help will be appreciated. Thanks
Try changing your connect function to explicitly call done(); I think you'll need this when calling series() in Gulp 4
gulp.task('connect', function (done) {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
done();
});
gulp.task('html', (done) =>
gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.on('end', () => {
connect.reload();
done();
});
);

gulp watch is not watching after first call

I have a problem with gulp watch.
After I call it for the first time, and after I make changes to the sass files, there are no changes in the terminal. Only if I re-invoke the gulp-watch I see the change of styles.
My gulpfile.js looks like this:
'use strict'
var gulp = require('gulp');
var sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
watch = require('gulp-watch');
gulp.task('html', function() {
return gulp.src('assets/*.html')
.pipe(gulp.dest('public'));
});
gulp.task('sass', function() {
return gulp.src('assets/css/main.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(gulp.dest("public/css"));
})
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/javascript'));
})
gulp.task('imgs', function() {
return gulp.src("assets/images/*.+(jpg|jpeg|png|gif)")
.pipe(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
interlaced: true
}))
.pipe(gulp.dest("public/images"))
})
gulp.task("watch", function() {
watch("assets/*.html", ["html"]);
watch("assets/css/*.scss", ["sass"]);
watch("assets/javascript/*.js", ["scripts"]);
watch("assets/images/*.+(jpg|jpeg|png|gif)", ["imgs"]);
});
gulp.task("default", ["html", "sass", "scripts", "imgs", "watch"]);
Question.
Why gulp watch does not track changes after calling gulp watch or gulp default?

Gulp is taking ages to execute tasks

I'm trying to give Gulp a try for the first time and can't figure out why is taking so long in loading packages and running tasks, about 48 seconds every time. Not sure how many packages are the average, but I think I need all of them. I've been trying to improve the performance by following some examples but I'm stuck in the same place.
I'd really appreciate any piece of advice!
This is my gulpfile.js:
var gulp = require('gulp'),
runSequence = require('run-sequence'),
templateCache = require('gulp-angular-templatecache'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename")
browserify = require('browserify'),
concat = require('gulp-concat'),
addStream = require('add-stream'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
ngAnnotate = require('gulp-ng-annotate'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
htmlmin = require('gulp-html-minifier'),
del = require('del');
function templates() {
return gulp.src('./app/views/**/*.html')
.pipe(templateCache({
module: 'portfolio'
}));
}
gulp.task('clean:dist', function() {
return del.sync('dist/assets/');
});
gulp.task('jshint', function() {
return gulp.src('./app/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
gulp.task('browserify', function() {
return browserify('./app/app.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(ngAnnotate())
.pipe(addStream.obj(templates()))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/js/'))
});
gulp.task('sass', function() {
return gulp.src('./app/css/main.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/css'))
});
gulp.task('images', function() {
return gulp.src('./app/img/**/*.{png,jpg,gif,svg}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/assets/img'))
});
gulp.task('copyfonts', function() {
gulp.src('./app/css/fonts/**/*.*')
.pipe(gulp.dest('./dist/assets/fonts'));
});
gulp.task('copy-index-html', function() {
gulp.src('./app/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist'));
});
gulp.task('serve', function() {
browserSync({
server: {
baseDir: './dist'
}
});
gulp.watch('app/js/**/*.js', ['browserify', reload]);
gulp.watch('app/css/**/*.scss', ['sass', reload]);
gulp.watch('app/views/**/*.html', [reload]);
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', function(callback) {
runSequence('clean:dist', 'jshint', ['browserify', 'sass', 'images','copy-index-html','copyfonts'], 'serve', callback);
});
Gulp performance (image link)

Having issues with Gulp.js file and Jekyll

Still getting familiar with Gulp, piping, etc. I have my Gulp.js file all set up but cannot figure out how to get the Jekyll html task to fire AFTER the _site folder has been compiled.
THE gulp file is below:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
minifyHTML = require('gulp-minify-html'),
cp = require('child_process');
//Source variables
var sassSources = ['components/sass/application.scss'];
var jsSources = ['components/js/*.js'];
var htmlSources = ['_site/**/*.html'];
gulp.task('styles', function() {
return gulp.src(sassSources)
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp.task('html', function() {
var opts = {comments:false, spare:false, quotes: false, empty: false};
gulp.src(htmlSources)
.pipe(minifyHTML(opts))
.pipe(gulp.dest('_site/'))
.pipe(notify({ message: 'HTML minification complete' }));
});
gulp.task('scripts', function() {
return gulp.src(jsSources)
//.pipe(jshint('.jshintrc'))
//.pipe(jshint.reporter('default'))
.pipe(concat('application.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'))
.pipe(gulp.dest('_site/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('clean', function() {
return gulp.src(['stylesheets', 'javascripts'], {read: false})
.pipe(clean());
});
//Build the Jekyll Site
gulp.task('jekyll-build', function (done) {
browserSync.notify('Building Jekyll');
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
//Rebuild Jekyll & do page reload
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
//Wait for jekyll-build, then launch the Server
gulp.task('browser-sync', ['jekyll-build'], function() {
browserSync.init(null, {
server: {
baseDir: '_site'
},
host: "localhost"
});
});
gulp.task('watch', function() {
// Watch .sass files
gulp.watch('components/sass/**/*.scss', ['styles']);
// Watch .js files
gulp.watch(jsSources, ['scripts']);
// Watch html files
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'browser-sync', 'html', 'watch');
});
You have to specify the dependencies to your html and style tasks in the jekyll-build task:
gulp.task('jekyll-build', ['styles', 'html'], function (done) {
...
}
You also need to change your html task adding a return before gulp.src.