GULP LESS Imports not working in gulp-less npm - npm

Having used Gulp all the time for 2 last years, I've suddenly got a problem with the less file imports and just can not resolve it.
I've tried more then 5 combinations, such as from SmashingMagazine, from gulp-less homepage, etc... none worked for me.
The problem is (error log in console output):
C:\wamp\www\lumenframe>gulp less
[10:23:25] Using gulpfile C:\wamp\www\lumenframe\Gulpfile.js
[10:23:25] Starting 'less'...
Potentially unhandled rejection [2] '/bower_components/animate.css/animate.css' wasn't found. Tried - /bower_components/animate.css/animate.c
ss,bower_components\bootstrap\less\bower_components\animate.css\animate.css,bower_components\animate.css\bower_components\animate.css\animate
.css,bower_components\font-awesome\less\bower_components\animate.css\animate.css in file C:\wamp\www\lumenframe\bower_components\assets\l
ess\appstrap.less line no. 43
Gulpfile.js looks like this:
// Init Gulp
var gulp = require('gulp');
// Dependencies
var less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-uglify');
// Folder paths
var jsdir = './bower_components/assets/js/',
jspub = './public/assets/js/',
lessdir = './bower_components/assets/less/',
lesspub = './public/assets/css/';
// LESS compiler
gulp.task('less', function () {
return gulp.src(lessdir + 'frontend.less')
.pipe(less({
compress: true,
paths: [
'./bower_components/bootstrap/less/',
'./bower_components/animate.css/',
'./bower_components/font-awesome/less/'
]
}))
.pipe(autoprefixer('last 10 versions', 'ie 9'))
.pipe(gulp.dest(lesspub));
});
// Concatenate and Minify JS
gulp.task('scripts', function () {
return gulp.src(jsdir + '*.js')
.pipe(concat('appstrap.js'))
.pipe(gulp.dest(jspub))
.pipe(rename('appstrap.min.js'))
.pipe(uglify())
.pipe(gulp.dest(jspub));
});
// Filewatcher for changes
gulp.task('watch', function () {
gulp.watch(jsdir + '*.js', ['scripts']);
gulp.watch(lessdir + '*.less', ['less']);
});
// Default Task combination
gulp.task('default', ['less', 'scripts', 'watch']);
All files are in their proper place, so they exists. And once I do #import appstrap.less, it comes out with the error **Potentially unhandled rejection [2].
frontend.less looks like this:
// Core source files of the whole frontend plugins
#import (once) "appstrap.less";
.btn{
color: #ff0000;
display: block;
}
Any visible errors ?

Related

Error when compiling Less in Gulp: `File not found with singular glob`

I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp

Gulp 4 watch all sass files, compile one

My file structure is:
sass
-main.sass
-variables.sass
-containers.sass
-buttons.sass
-helpers.sass
css
-main.css
In my main.sass file, I'm importing all the other sass files:
#import "variables";
#import "containers";
#import "buttons";
//etc...
In gulp I want to watch any changed scss file and compile only main.sass into main.css.
This is what I have:
var gulp = require('gulp');
var sass = require('gulp-sass');
function styles() {
return gulp.src('sass/main.sass', {
sourcemaps: true
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css/'));
}
function watch() {
gulp.watch('sass/**/*.sass', styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
The files are being watched but when I update one, the main.css file is not updated.
I believe one of your problems could be that you define a watching task via gulp.watch(...) but its reference is lost and so it never gets called. However, I don't really understand what you try to achieve with the call to parallel(). I'm currently working on a similar use case with a build script like the following:
var gulp = require('gulp');
function styles() {
return gulp.src('...')
.pipe(...)
.pipe(gulp.dest('...'));
}
exports.build = gulp.watch('...', styles);
This should be a minimal working example, just call gulp build.

Gulp terminates immediately when running gulp watch

When I run 'gulp watch' in my terminal, I get this response:
[13:59:40] Using gulpfile ~/path/to/gulpfile.js
[13:59:40] Starting 'watch'...
[13:59:40] Finished 'watch' after 45 ms
Here is the relevant code from my gulpfile.js:
gulp.task('sass', function () {
return gulp.src([baseDir + '/sass/style.scss',baseDir + '/sass/events/events.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(baseDir + '/css'))
.pipe(livereload());
});
// watch
gulp.task('watch', function () {
livereload.listen();
gulp.watch(baseDir + '/sass/**/*.scss', ['sass']);
});
My problem is this: when I make a change in a .scss file, it is not recognised in the terminal.. why is this?
My gulp version is
version 3.9.1
Local version 3.9.1
When this happens I assume my directory is off. No errors? No files, lol. Have you tried replacing baseDir with a hard coded call to the directory and see what happens? example
gulp.watch('app/sass/**/*.scss', ['sass']);
and see what happens?

browsersync + gulp not injecting css - only reloading

I have recently moved to using BrowserSync, I followed their gulp guide and tweaked a few things to solve some issues I was having, however now whilst it works, it appears to reload the page every time rather than inject the CSS.
My gulp file:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
gulp.task('scripts', function() {
return gulp.src([
'js/dev/main/**/*.js',
// We have to set the bootstrap lines separately as some need to go before others
'js/dev/bootstrap/alert.js',
'js/dev/bootstrap/collapse.js',
'js/dev/bootstrap/tooltip.js',
'js/dev/bootstrap/popover.js',
'js/dev/bootstrap/tab.js',
'js/dev/bootstrap/transition.js',
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'));
});
gulp.task('uglify', ['scripts'], function() {
return gulp.src('js/scripts.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('./js'));
});
// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
browserSync.reload();
done();
});
/* Creates the standard version */
gulp.task('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
});
/* Creates the minified version */
gulp.task('css-minify', ['styles'], function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact' // Options: nested, expanded, compact, compressed
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(cleanCSS({
advanced: false,
aggressiveMerging: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'));
});
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "bmmedia.dev",
host: 'bmmedia.dev',
// port: 5000,
browser: "chrome",
});
});
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});
gulp.task('default', ['js-watch', 'css-minify']);
Notice my watch task, this was the most recent change I did as I was having the problem specified here, and I solved it with this answer, however now whilst it works fine, it appears to only reload, rather than inject.
Is there something I can do to fix this?
Edit:
I just realized it was reloading every time because I was running js-watch every time there was a change, even to .scss files, so I changed it to this:
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
However now it doesn't inject OR reload when a .scss file changes.
I believe I have fixed it...
My watch task I changed to:
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
Then in my styles task I changed this line:
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
to:
.pipe(browserSync.stream());
Not sure why it wasn't finding the CSS changes, all I know is it now seems to work.
You can also try just watching the compiled output files.
Dest/css/styles.css
Dest/js/my.js
Any changes to a sass / js module would reflect in the final css / js output files. Browser reloading will only fire when the css/js compilation has completed, rather than trying to reload as the sass /js bundles compile.
Also, take a look at Gulp-newer. It can be used for checking / triggering tasks if the final output file (dest/css/styles.css) has been changed relative to the files that made it (src/sass/**.scss).
This is also very handy for images (no need to minify them on each build, only if newer) any other checks you need to perform only if something has changed can also be added.

Minify ES6 and generate source-maps with Browserify

I use browserify and 6to5ify to compile ES6 to JS and assemble project.
The problem is that I can't find any solution, how to minify compiled javascript, and generate source-maps for minified js.
My build task code is:
'use strict';
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
buildErrorHandler = require('./../utilities/build-error-handler').handleBuildError
;
gulp.task('js:build-scripts', function() {
var commandLineParameters = process.argv.slice(2);
var releaseModeRequired = commandLineParameters.indexOf('--release') > -1;
var bundler = browserify({
debug: true,
entries: ['./src/js/entry-point.js']
})
;
var pipeLine = bundler
.transform('6to5ify')
.bundle()
.on('error', buildErrorHandler)
.pipe(plumber({
errorHandler: buildErrorHandler
}))
.pipe(source('application.js'));
if(releaseModeRequired){
pipeLine = pipeLine.pipe(buffer())
.pipe(uglify());
}
pipeLine =pipeLine.pipe(gulp.dest('build/js'))
;
return pipeLine;
});
If I don't minify code, sourcemaps are working fine, but if I uglify it, sourcemaps disappear.
I tried several solutions like this or this but none of them works.
EDITED:
"browserify": "^8.1.3",
"gulp": "^3.8.10",
This has been an issue with Browserify + Uglify.js for a long time. It got fixed in this commit, but has not been released yet and was release with v2.4.21.