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
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!
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])
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.
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
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'))
})