I am trying to watch scss files and only recompile them when they change. For ease of deployment, I want to use gulp-ruby-sass instead of gulp-sass.
I want to do this but the task will hang on "dependency seen"
// Doesn't work
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-ruby-sass')
var watch = require('gulp-watch');
watch("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
The script works when I use vanilla gulp.src
// Works
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-ruby-sass')
var watch = require('gulp-watch');
gulp.src("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
It also works when I use gulp-sass instead of gulp-ruby-sass
// Works
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-sass')
var watch = require('gulp-watch');
watch("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
This tells me that there is something wrong with the interaction between gulp-watch and gulp-ruby-sass. Any ideas?
I found that gulp-ruby-sass-ns doesn't hang. The library doesn't seem quite as well supported however so I will leave this question open to see whether anyone else has any input
Install Gulp-Plumber and call it right before you compile your sass.
Related
I am not able to pass settings to the uncss module in case I want to call it within postcss within a gulp script.
Here is my gulp task:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssvars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var cssImport = require('postcss-import');
var mixins = require('postcss-mixins');
var uncss = require('postcss-uncss');
var autoprefixer = require('autoprefixer');
var autoprefixeroptions = {
"browsers": [
"last 3 version",
"> 1%"
]
}
var uncssoptions = {
html: ['dest/index.html'],
ignore: ['.text-right', '.text-left', '.affix', '.navbar-default.affix',
/\w\.in/,
'.fade',
'.collapse',
'.collapsing',
/(#|\.)navbar(\-[a-zA-Z]+)?/,
/(#|\.)dropdown(\-[a-zA-Z]+)?/,
/(#|\.)(open)/,
'.modal',
'.modal.fade.in',
'.modal-dialog',
'.modal-document',
'.modal-scrollbar-measure',
'.modal-backdrop.fade',
'.modal-backdrop.in',
'.modal.fade.modal-dialog',
'.modal.in.modal-dialog',
'.modal-open',
'.in',
'.modal-backdrop'
]
};
gulp.task('styles', function() {
var plugins = [
cssImport,
mixins,
cssvars,
nested,
uncss(uncssoptions),
autoprefixer(autoprefixeroptions)
];
return gulp.src('./src/css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest/css'));
})
When I try this, I get at runtime (when I change something in a css file) the folowing error message:
[Browsersync] Serving files from: dest
[12:20:39] Starting 'styles'...
[12:20:39] 'styles' errored after 295 μs
[12:20:39] TypeError: uncss is not a function
at Gulp.<anonymous> (C:\Projects\test\gulp\tasks\styles.js:50:3)
at module.exports (C:\Projects\test\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Projects\test\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Projects\test\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Projects\test\node_modules\orchestrator\index.js:134:8)
at C:\Projects\test\gulp\tasks\watch.js:19:10
at write (C:\Projects\test\node_modules\gulp-watch\index.js:147:3)
at C:\Projects\test\node_modules\gulp-watch\index.js:130:5
So, how else fo i setup uncss in a gulp file, when i call it as a postcss module?
Thank you
Kai
Ok, I solved it myself. I forgot to use uncss in the package.json file along with postcss-uncss. Now it works.
I hope you like that contribution. In all my googling, i was not able to find this answer in the web.
BTW, this sample shows how to use uncss on Bootstrap.
I have a task which depends on a previous task which merges multiple streams and return the resulting stream. The task which depends on it never seems to run.
This is my dependency:
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var merge = require('gulp-merge');
var cached = require('gulp-cached');
gulp.task('css:minify', function () {
var bootstrapLess = gulp.src(['plugins/bootstrap/less/bootstrap.less'])
.pipe(cached('bootstrap less'))
.pipe(less())
.pipe(gulp.dest('plugins/bootstrap/less/'));
var aceLess = gulp.src(['plugins/ace-admin/less/ace.less'])
.pipe(cached('ace less'))
.pipe(less())
.pipe(gulp.dest('plugins/ace-admin/less/'));
var ace = gulp.src(files.css.ace)
.pipe(cached('ace min'))
.pipe(sourcemaps.init())
.pipe(minifyCss())
.pipe(concat('aes.ace.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Content/'));
var css = gulp.src(files.css.all)
.pipe(cached('aes.min'))
.pipe(sourcemaps.init())
.pipe(minifyCss())
.pipe(concat('aes.all.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Content/'));
console.log('css minification in progress');
return merge(bootstrapLess, aceLess, ace, css);
});
The task which uses them is as follows:
gulp.task('test', ['css:minify'], function () {
console.log('testing');
});
I get the following output:
[14:32:53] Starting 'css:minify'...
css minification in progress
Process terminated with code 0.
The css:minify task never reports that it has finished, and the test task never logs anything to the console. My expectation was that the dependency would return a stream, and that the test task would run when the stream finished. What have I done wrong which prevents this from happening?
Edit: it seems that the problem is the concat within the ace and css sections of the css:minify task (because if I comment out those lines everything works fine), but I still can't see why it prevents the task from working.
It turns out that the problem was something to do with gulp-merge. When I changed it to instead use merge-stream everything worked as expected.
So I've got a problem with my gulp.watch task. So the short version of my gulpfile.js is:
var gulp = require('gulp'),
usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
minifyHTML = require('gulp-minify-html'),
rimraf = require('gulp-rimraf'),
live = require('gulp-livereload'),
strip = require('gulp-strip-debug'),
gulpif = require('gulp-if');
var paths = {styles: 'public-src/less/*.*'};
gulp.task('delete-css', function (cb) {
return gulp.src(paths.css_delete)
.pipe(rimraf());
});
gulp.task('custom-less', ['delete-css'], function (cb) {
return gulp.src(paths.styles)
.pipe(less())
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', function () {
gulp.watch([paths.styles],['custom-less']);
});
Also I've got a build task which contains custom-less task, which actually works. Here it is
gulp.task('build-custom', ['custom-less']);
gulp.task('build', ['build-custom']);
So when i ran gulp build css is concatenated to one file. When I edit my css in terminal I see that task custom-less is starting and finished, but the css file does not get updated. I cant seem to understand why the same task works when you run it using gulp build but when you watch it, it does not change...
Hope anyone has ideas?
I have a Gulp taks like this:
var gulp = require('gulp');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
return gulp.src('./less/*.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./assets/css'));
});
The .css file is created as well as the source map file. However the source map doesn't have the content ("sourcesContent": [null,null,...,null]), which should be the case as the sourcemaps plugin says by default it will include the content (I also tried explicitly setting includeContent to true).
When I remove the minify step it works well and I can see the content of the original less files, so I checked if minify-css supports sourcemaps and according to the plugins list it should.
Am I doing something wrong? Is there any known incompatibility between less and minify-css when generating sourcemaps?
Sourecemaps are pretty young in minifyCSS, and subsequentyl gulp-minify-css and seem to be still buggy to some extend. I haven't found this particular case in the bug tracker, but stumbled upon similar issues when using Sass.
I found a workaround using a similar plugin based on PostCSS. It's not as elegant as the other, but still better than including the CSSClean plugin in LESS ;-)
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
gulp.task('less', function() {
return gulp.src('./bower_components/bootstrap/less/bootstrap.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(postcss([csswring]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/css'));
});
alternatively, you could call minifyCSS only for production mode, Sourcemaps only for DEV mode, if your setup allows for it.
I hope this helps!
This question has hinted me on how to run Jekyll with Gulp.
It works fine except I’m unable to trigger livereload (but it runs without errors).
My knowledge of Node is limited, so I’m probably missing something...
var gulp = require('gulp');
var refresh = require('gulp-livereload');
var lr = require('tiny-lr');
var server = lr();
gulp.task('jw', function(){
var spawn = require('child_process').spawn,
j = spawn('jekyll', ['-w', 'build']);
j.stdout.on('data', function (data) {
console.log('stdout: ' + data); // works fine
refresh(server); // doesn’t trigger
});
});
gulp-livereload requires files piped into it via gulp.src() or other vinyl input sources. In this case, I recommend adding gulp-watch to watch for the files that Jekyll writes, and reload based on that.
It would look something like this:
var gulp = require('gulp');
var refresh = require('gulp-livereload');
var watch = require('gulp-watch');
var lr = require('tiny-lr');
var server = lr();
gulp.task('jw', function(){
var spawn = require('child_process').spawn,
j = spawn('jekyll', ['-w', 'build']);
j.stdout.on('data', function (data) {
console.log('stdout: ' + data); // works fine
});
watch({glob: '/glob/path/to/jekyll/output'}, function(files) {
// update files in batch mode
return files.pipe(refresh(server));
});
});
As long as Jekyll only rewrites changed files, this will work perfectly. However, if it overwrites everything, then livereload will do little more than refresh the browser on every change.
You can trigger livereload at the end of the build, making it reload the page so you won't have multiple refresh :