I'm trying to compile some .scss with the following Gulp task:
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require('gulp-sass');
var paths = {
webroot: "./wwwroot/"
};
paths.sass = paths.webroot + "lib/foundation-apps/scss/**/*.scss";
gulp.task('sass', function () {
gulp.src(paths.sass)
.pipe(sass())
.pipe(gulp.dest(paths.webroot + '/css/'));
});
This is the output of the command:
but the following is the compile result:
Why only the foundation.scss is compiled?
Check the structure of the bower.json file for foundation-apps (in package folder).
If it's the same found on the project github repo, should be something like this:
...
"main": [
"scss/foundation.scss",
"dist/js/foundation-apps.js",
"dist/js/foundation-apps-templates.js"
],
...
which means that only the scss/foundation.scss file will be compiled.
If you want to specify other files, you should create a override on your app bower.json file (on your root path)
Try to append to the end of the file something like this:
...
"overrides": {
"foundation-apps": {
"main": [
"scss/foundation.scss",
... (all the other files you want) ...
"dist/js/foundation-apps.js",
"dist/js/foundation-apps-templates.js"
]
}
}
...
In this way, you can update your versions without override your custom config (for the package folder default bower.json)
hope it helps.
Related
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 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.
Using our gulp script, we want to create different compiled & minified css files for vendor (via bower, see screenshot) and custom styles. Our task for the vendor styles does not work as expected, though. We expected it to iterate through the bower_components, grab the css files, concatenate them, minify them and save the generated vendor.min.css to dist/styles. Said vendor.min.css is not generated, however. We tried commenting some of the .pipe() commands in the return statement and suspect that it might have something to do with the concat() function.
Bower components:
Parts of our gulpfile.js including the malfunctioning task:
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
debug = require('gulp-debug'),
bower = require('gulp-main-bower-files'),
uglify = require('gulp-uglify'),
minify = require('gulp-clean-css'),
filter = require('gulp-filter'),
flatten = require('gulp-flatten'),
autoprefix = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
del = require('del');
/**
* Predefined file-type filters to use with gulp-filter
*/
var filters = {
css: '**/*.css',
js: '**/*.js',
webFonts: ['**/*.otf','**/*.woff*', '**/*.woff2','**/*.ttf','**/*.eot','**/*.svg'],
images: ['**/*.png','**/*.gif','**/*.jpg','**/*.svg'],
movies: []
};
/**
* concatVendorCSS
* Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
* no autoprefixing included: should be done by source package
* scss-Files will be ignored - include them in /assets/styles/main.scss
*/
gulp.task('styles:vendor',['clean:vendor:styles'], function() {
console.log('concatenating vendor css files and moving to dist...');
var filterCSS = filter([filters.css], { restore: true });
return gulp.src('bower.json')
.pipe(bower())
.pipe(filterCSS)
.pipe(sourcemaps.init())
.pipe(flatten())
.pipe(concat('vendor.min.css'))
.pipe(autoprefix(apConfig))
.pipe(minify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/styles/'));
});
bower.json file:
{
"name": "ptype",
"homepage": "-",
"authors": [
"..."
],
"license": "MIT",
"private": true,
"dependencies": {
"css-hamburgers": "^0.5.0",
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
"font-awesome": "fontawesome#^4.6.3",
"jquery": "^3.2.1",
"selectize": "^0.12.4",
"swiper": "^4.0.6",
"jquery-focuspoint": "^1.1.3"
},
"overrides": {
"font-awesome": {
"main": [
"./fonts/FontAwesome.otf",
"./fonts/fontawesome-webfont.eot",
"./fonts/fontawesome-webfont.svg",
"./fonts/fontawesome-webfont.ttf",
"./fonts/fontawesome-webfont.woff",
"./fonts/fontawesome-webfont.woff2",
"./scss/font-awesome.scss"
]
}
}
}
You need to change the components that work together. Use 'main-bower-files' instead of 'gulp-main-bower-files' and exchange 'gulp-concat' with 'gulp-group-concat' to combine as shown below.
I left the double filter in order to get a nicer debug output.
var gulp = require('gulp'),
sass = require('gulp-sass'),
groupConcat = require('gulp-group-concat'),
concat = require('gulp-concat'),
debug = require('gulp-debug'),
bowerMain = require('main-bower-files'),
uglify = require('gulp-uglify'),
minify = require('gulp-clean-css'),
filter = require('gulp-filter'),
flatten = require('gulp-flatten'),
autoprefix = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
gutil = require('gulp-util'),
del = require('del');
/**
* concatVendorCSS
* Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
* no autoprefixing included: should be done by source package
* scss-Files will be ignored - include them in /assets/styles/main.scss
*/
gulp.task('styles:vendor',['clean:vendor:styles'], function(){
console.log('concatenating bower vendor css files into vendor.min.css and moving to ' + sassConfig.outputDirectory + '...');
return gulp.src(bowerMain())
.pipe( filter(filters.css) )
.pipe( debug() )
.pipe( sourcemaps.init() )
.pipe( groupConcat( { 'vendor.min.css': filters.css } ) )
.pipe( autoprefix(apConfig) )
.pipe( minify() )
.pipe( sourcemaps.write('./maps') )
.pipe( gulp.dest('dist/styles/') );
});
I have the following package.json file:
{
"name": "ASP.NET",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-inject": "1.5.0",
"gulp-util": "3.0.6",
"gulp-print": "1.1.0",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"gulp-load-plugins": "0.9.0",
"del": "1.2.0",
"wiredep": "3.0.0-beta",
"jshint": "2.8.0",
"jshint-stylish": "2.0.1"
}
}
var gulp = require('gulp'),
util = require('gulp-util'),
print = require('gulp-print'),
inject = require('gulp-inject'),
del = require('del'),
cssmin = require('gulp-cssmin'),
jshint = require('gulp-jshint')
uglify = require('gulp-uglify'),
wiredep = require('wiredep').stream,
bowerJson = require('./bower.json')
gulp = require('gulp'),
project = require('./project.json');
gulp.task('wiredep', function () {
log('Placing Bower Components from ' + paths.bowerComponents + ' in ' + paths.layoutPage)
return gulp
.src(paths.layoutPage)
.pipe(wiredep({
bowerJson: bowerJson,
directory: paths.bowerComponents,
ignorePath: '../..'
}))
.pipe($.inject(gulp.src([
paths.jsMain,
paths.jsContent])))
.pipe(gulp.dest(paths.layoutPage));
});
When I run this task for a bower.json I get the error:
[16:11:31] Using gulpfile C:\MyProject\src\MyProject\Gulpfile.js
[16:11:31] Starting 'wiredep'...
[16:11:31] Placing Bower Components from ./bower_components/ in ./Views/Shared/_Layout.cshtml
[16:11:31] 'wiredep' errored after 5.7 ms
Process terminated with code 1.
[16:11:31] ReferenceError: $ is not defined
Why is $ not defined and how can I get it defined?
What I tried is adding "jquery": "2.1.4", to devDependencies in package.json.
By reading the gulpfile.js part of the gulp-inject documentation I discovered that I do not need to put a $ in front of it. Requiring inject and referencing it directly works. E.g.,
var inject = require('gulp-inject'),
gulp.task('inject', ['wiredep'], function () {
log('Wire up the css and js into ' + paths.layoutPage);
return gulp
.src(paths.layoutPage)
.pipe(inject(gulp.src([paths.js, paths.css], { read: false }), { ignorePath: project.webroot }))
.pipe(gulp.dest(paths.layoutPagePath));
});
Using $ directly can I think be done with var $ = require('jquery') and adding jquery to package.json. Correct me if I'm wrong.
Just now my project also happend this phenomenon.Last I found the gulp lack of a plugins named 'gulp-load-plugins';
After install it we should state it for put all the plugins from package.json into the $ charactor;It is var $=require('gulp-load-plugins')();
I have the next files structure:
modules/
list/
news/
news.scss
login/
login.scss
common/
common.scss
And I want to get next structure using gulp:
modules/
list/
news/
news.scss
news.css
login/
login.scss
login.css
common/
common.scss
Here is part from my gulpfile:
gulp.src("modules/list/*/*.scss")
.pipe(sass())
.pipe(gulp.dest("modules/list/"));
In common.scss there are different variables. It is necessary that variables from common.scss will be used in each module(news.scss, login.scss). How to update my gulpfile that common.scss will be concatenated with each module scss file?
Sounds like a job for stream arrays... here's the solution, please check the comments for what's going on:
var merge = require('merge2');
var glob = require('glob');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('styles', function(done) {
// first, we glob our files like we would with gulp.src
glob('modules/list/**/*.scss', function(er, files) {
// for each of those files we create a new stram
var tasks = files.map(function(file) {
// this gives us the concat name, which is the same
// as the original file's name
var concatStr = file.substr('modules/list/'.length)
// we load common.scss and our file
return gulp.src(['modules/common/common.scss', file])
// concatenate it
.pipe(concat(concatStr))
});
// we merge all our streams
merge(tasks)
// run them through sass
.pipe(sass())
// and save them where we want them
.pipe(gulp.dest('modules/list'));
// ~fin
done();
});
});
You might want to take a look into Sass's #import directive, though.