how to pass settings to postcss modules in gulp, especially to uncss? - gulp

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.

Related

postcss/precss - convert .scss to .css

I'm usign postcss/precss with gulp to convert my scss markup to valid css. This is my gulpfile.js:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
The problem is that it doesn't change file extensions, so I need to write scss in *.css files, and what I am trying to do is to set it to read scss from *.scss files and output css into *.css files. Can anybody tell me how to achieve that?
Not an expert on this, so I'll just share how we do sass compilation.
We use gulp-concat to concat the files together into one .css file. Your gulp snippet would be as follows:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(concat('FILENAME.css'))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
Don't forget to do npm install --save-dev gulp-concat first!

Using package.json dependencies as folderstructure in gulpfile.js

I'm trying to create an automated process for including node modules in my projects. Some modules have css included, and so I'm trying to make gulpfile.js in a way it can read those modules and include the css of that module.
I try to be selective and have only the folders selected that I install as a dependency. Not the entire node_modules folder.
My gulpfile.js:
// Import (not showing all for the sake of the question)
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const fs = require('fs');
const json = JSON.parse(fs.readFileSync('./package.json'));
// File paths
const files = {
cssPath: 'assets/styles/**/*.scss',
jsPath: 'assets/scripts/**/*.js',
imgPath: 'assets/images/**/*',
modulesPath: ['node_modules']+json.dependencies+'/**/*.scss'
//Desired output: node_modules/module_name/all_folders/all.scss
}
// Compile CSS
function styles(){
return src([files.cssPath, files.modulesPath])
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([ autoprefixer(), cssnano() ]))
.pipe(sourcemaps.write('.'))
.pipe(dest('dist/styles')
);
}
When I run "gulp styles" the function runs just fine, but the desired styles are not included. What am I doing wrong?
First, there's an easier way to get your package.json file:
const package = require('./package.json');
Then you need the names of your dependencies, which are the keys in the dependencies object. Map these to a glob, like this:
const files = {
...
modulesPath: Object.keys(package.dependencies).map(module => `node_modules/${module}/**/*.scss`)
}
Lastly, destructure that array in your styles task:
return src([files.cssPath, ...files.modulesPath])

gulp-ruby-sass not working with gulp-watch

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.

gulp postcss rem to pixel fall back

I'm trying to set up a gulp task to process rem unit automatically and add a pixel fallback.
Here is my gulfile.js:
// NPM install gulp gulp-less gulp-watch gulp-plumber gulp-livereload gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var pixrem = require('gulp-pixrem');
gulp.task('less', function() {
var processors = [
autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
mqpacker,
csswring({
preserveHacks: true,
removeAllComments: true
})
];
gulp.src('./style.less') // only compile the entry file
.pipe(plumber())
.pipe(less({
paths: ['./','./vendors/', './layouts', './partials/', './overrides/']
} ))
.pipe(pixrem('10px'))
.pipe(postcss(processors))
.pipe(plumber.stop())
.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
The task is now running and converting rems to pixel fallbacks thanks to gulp-pixrem.
The thing I can't seem to enable is switching the default root value. .pipe(pixrem('10px')) or .pipe(pixrem({rootvalue: '10px'}) doesn't change the base unit conversion.
.pipe(pixrem({ rootvalue: '10px' })) actually return an error TypeError in plugin gulp-pixrem Cannot read property '1' of null
Edit
Don't mind me.
.pipe(pixrem(100%)) is working fine.
End Edit
.pipe(pixrem(100%)) is working fine

How to extract zip file with gulp

Here is my gulpfile.js
var gulp = require('gulp');
var download = require('gulp-download');
var unzip = require('unzip');
gulp.task('download-selenium', function(){
download('https://selenium.googlecode.com/files/selenium-server-2.39.0.zip')
.pipe(unzip.Extract({ path: 'selenium' }))
.pipe(gulp.dest("selenium"));
});
When I launch it I have the following issue:
$ gulp download-selenium
[gulp] Using file /Users/toutpt/makina/nmd/carteeco/mockup/gulpfile.js
[gulp] Working directory changed to /Users/toutpt/makina/nmd/carteeco/mockup
[gulp] Running 'download-selenium'...
[gulp] Errored 'download-selenium' in 9.08 ms Cannot pipe. Not readable.
/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:153
throw err;
^
Error: Cannot pipe. Not readable.
at Extract.Writable.pipe (_stream_writable.js:125:22)
at Gulp.gulp.task.server (/Users/toutpt/makina/nmd/carteeco/mockup/gulpfile.js:99:6)
at module.exports (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:31:7)
at Gulp.Orchestrator._runTask (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at Gulp.run (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/index.js:20:14)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:132:19
at process._tickCallback (node.js:415:13)
at Function.Module.runMain (module.js:499:11)
So How could I extract my downloaded file ?
Remember, gulp uses Streams for the file. npm unzip does not send a pipe-able stream as an output.
For this case you would be best off to not use the gulp.dest, but instead use the unzip extract path.
Try this:
var gulp = require('gulp');
var download = require('gulp-download');
var unzip = require('unzip');
gulp.task('download-selenium', function(){
download('https://selenium.googlecode.com/files/selenium-server-2.39.0.zip')
.pipe(unzip.Extract({ path: './selenium' }));
});
gulp-download doesn't seem to be maintained anymore, and gulp-gunzip has a more up-to-date example:
var gulp = require('gulp')
var request = require('request')
var source = require('vinyl-source-stream')
var gunzip = require('gulp-gunzip')
var untar = require('gulp-untar')
gulp.task('default', function () {
return request('http://example.org/some-file.tar.gz')
.pipe(source('some-file.tar.gz'))
.pipe(gunzip())
.pipe(untar())
.pipe(gulp.dest('output'))
})