Gulp watch and compile less files with #import - javascript

I'm trying to get my head around gulp to watch and compile a .less project + livereload.
I have a style.less file which use #import.
When i run the gulp task it doesn't seem to understand the imports. When I modify the main less file, gulp compiles the file and refresh the browser but if i modify only an import, the changes are ignored.
Here is my gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
gulp.task('default', function() {
return gulp.src('./style.less')
.pipe(watch())
.pipe(plumber())
.pipe(less({
paths: ['./', './overrides/']
}))
.pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
.pipe(gulp.dest('./'))
.pipe(livereload());
});
I tried not specifying the main file name in gulp.src('./*.less') but then all of the less files are compiled indvidually.
Thanks

Right now you are opening the single gulp.src file, and watching After you open the file with gulp.
The following will split the watching and src into two tasks, allowing for separate file and src watching.
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
gulp.task('less', function() {
return gulp.src('./style.less') // only compile the entry file
.pipe(plumber())
.pipe(less({
paths: ['./', './overrides/']
}))
.pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
.pipe(gulp.dest('./'))
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch('./*.less', ['less']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']); // Default will run the 'entry' watch task
When Any of the files found with *.less are altered it will then run the task which will compile just the src file.
The #imports should be 'included' correctly, if not check the import settings.

Related

Modify gulpfile to read html files in subfolder and spit them out to build folder

I have been working on modifying this relatively simple gulpfile/project: https://github.com/ispykenny/sass-to-inline-css
The first issue I had was to update to gulp v4, but I've also tried to store variables for my src and destination folders which is a bit easier to control. So now my gulpfile looks like this:
const gulp = require('gulp');
const inlineCss = require('gulp-inline-css');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const plumber = require('gulp-plumber');
const del = require('del');
const srcFolder = './src'; // TODO tidy this up once working
const buildFolder = srcFolder + '/build/'; // Tidy this up once working
const src = {
scss: 'src/scss/**/*.scss',
templates: 'src/templates/**/*.html'
}
const dest = {
build: 'build/',
css: 'build/css'
};
function processClean() {
return del(`${buildFolder}**`, { force: true });
}
function processSass() {
return gulp
.src(src.scss)
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest(dest.css))
.pipe(browserSync.stream())
}
function processInline() {
return gulp
.src('./*.html')
.pipe(inlineCss({
removeHtmlSelectors: true
}))
.pipe(gulp.dest('build/'))
}
function processWatch() {
gulp.watch(['./src/scss/**/*.scss'], processSass);
gulp.watch(srcFolder).on('change', browserSync.reload);
gulp.watch(distFolder).on('change', browserSync.reload);
}
const buildStyles = gulp.series(processSass, processInline);
const build = gulp.parallel(processClean, buildStyles);
gulp.task('clean', processClean);
gulp.task('styles', buildStyles);
gulp.task('sass', processSass);
gulp.task('inline', processInline);
gulp.task('build', build);
gulp.task('watch', processWatch);
But I am now wanting to create lots of template files, store them in a subfolder and have gulp spit out each file into the destination folder. if I have index.html, test1.html etc in the root it works fine.
I tried modifying this:
function processInline() { return gulp.src('./*.html')
To this:
function processInline() { return gulp.src(src.templates) // should equate to 'src/templates/**/*html'
Now I'm seeing this error in the console:
ENOENT: no such file or directory, open 'C:\Users\myuser\pathToApp\emailTemplates\src\templates\build\css\style.css'
In the head of index.html in the root is this:
<link rel="stylesheet" href="build/css/style.css">
I actually don't really care about the css file as the final output should be inline (for email templates). But I cannot get my head around why this is happening.
Does gulp create the css file and then read the class names from there? EDIT, Ah I guess it must because it has to convert the sass to readable css first before stripping out the class names and injecting the inline styles.
Years ago I worked with grunt a fair bit, and webpack, but haven't done much with gulp.
I hope it is obvious, but if you need more information just let me know.

gulp sass not minifying

Having a task to process SCSS files (where some of them are just plain CSS) the end result is not minified .. This is part of my gulpfile.js:
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
var estilos = [
'app/scss/bootstrap.scss', /*a bunch of includes of other scss files*/
'node_modules/select2/dist/css/select2.min.css',
'node_modules/magnific-popup/dist/magnific-popup.css',
'app/scss/estilos.scss',
'app/scss/indexSlider.scss'
]
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(minifyCss())
.pipe(concatCss('final.min.css'))
.pipe(gulp.dest('public/css'))
});
I just started 2 days ago with gulp so my debugging skills are pretty minimum so far... what I'm I doing wrong for the final file not being minified?
you have a different src in your estilos, at first you have to compile them each to css, then merge. You can find the answer in this example https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/.
Hope is there help you)
Try moving the concat before the minifying:
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(concatCss('final.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest('public/css'))
});
that should fix it.
Also I would recommend to use gulp-clean-css because gulp-minify-css has being deprecated.

gulp tasks - concatenate files that created by another gulp task

I want to minify my js files in my /_dev folder then rename them and copy hem to minify-js folder, then concatenate minified files.
I use a gulpfile.js like this:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function() {
return gulp.src('_dev/js/libraries/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('minifiedJS'));
});
gulp.task('concatFiles',['minify-js'],function (){
return gulp.src(['minifiedJS/jquery.jplayer.min.js', 'minifiedJS/jplayer.playlist.min.js', 'minifiedJS/LinkToPlayer.min.js'])
.pipe(concat('final.js'))
.pipe(gulp.dest('_dist/js'));
});
when I run:
gulp concatFiles
minify-js task create the following file in minifiedJSfolder.
jquery.jplayer.min.js
jplayer.playlist.min.js
LinkToPlayer.min.js
but final.js won't create till I run gulp concatFiles command again.
how can i solve this problem?
You may try in one task as following
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function(){
return gulp.src('_dev/js/libraries/*.js')
.pipe(concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('final.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minify-js'], function(){});

With the Browserify API, use require and exclude on a local file

With the Browserify API and Gulp, I have this:
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var dependencies = [
'lodash',
'./test.js',
];
gulp.task('lib', function() {
return browserify()
.require(dependencies)
.bundle()
.pipe(source('lib.js'))
.pipe(gulp.dest('./'));
});
gulp.task('app', function() {
return browserify('./app.js')
.external(dependencies)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
And in app.js I have this:
var _ = require('lodash');
var test = require('./test.js');
The Lodash line works fine, but the ./test.js does not work. I get the error Error: Cannot find module '/test.js'.
How do I get this to work?
For some reason, the key differs between bundle.js and lib.js. In lib.js, the key for test.js is the full path (/Users/gary/Projects/browserify-test/test.js) whereas in bundle.js it's looking for a module with the key ./test.js. If I manually change the latter to be the same as the former, then it works.
I'm guessing that ultimately, Browserify doesn't support require on local files that are excluded from the same bundle.
browserify needs an absolute path to retrieve the file and it leaves that as the bundle key. The way to fix it is to use the expose option...
In your build..
var dependencies = [
'lodash',
{file: './test.js', expose: 'test'},
];
and in app.js...
var _ = require('lodash');
var test = require('test');

How can I provide write permission to index.html while injecting js and css in gulp?

I use perforce for code checkin in our private server, so after production build (i.e., when index.html is read only) my gulp task fails with below error.
[INFO] [11:30:19] Error: EPERM: operation not permitted, open 'C:\MyProjectDir\index.html'
Once I checkout files or uncheck the read only property (using windows box) the gulp task finishes successfully. Is there a way to change it's permission through gulp task to avoid this manual intervention?
PS: I have used chmod(777)
Gulp file (end part where inject takes place)
var gulp = require('gulp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
minify = require('gulp-minify-css'),
concatVendor = require('gulp-concat-vendor'),
concatCss = require('gulp-concat-css'),
rev = require('gulp-rev'),
clone = require('gulp-clone'),
inject = require('gulp-inject'),
del = require('del'),
runSequence = require('run-sequence'),
chmod = require('gulp-chmod'),
series = require('stream-series'),
ngAnnotate = require('gulp-ng-annotate'),
rename = require("gulp-rename");
...
gulp.task('index', ['gulp-js-files', 'gulp-css-files'], function() {
var target = gulp.src(mainIndexFile);
return target.pipe(chmod(777)).pipe(inject(series(vendorCss, customCss, vendorJs), { ignorePath: ['MyProjectDir'], addRootSlash: false }))
.pipe(gulp.dest(mainDestination));
});
...
Running cmd in Administrator mode
One option would be to use gulp-exec to remove the read-only flag with attrib -r, then re-set it with attrib +r after injecting the data (if necesarry).
Following is an example:
gulp.task('remove-readonly-attributes', function() {
require("child_process").exec("attrib -r <dir-name>\*.* /s");
});

Categories