We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).
For example our product_view.scss should have a product_view.css.
However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: '<%= pkg.src %>/assets/sass',
src: ['*.scss'],
dest: '<%= pkg.src %>/assets/media/out/css',
ext: '.css'
}]
},
},
I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using
#import 'compass/reset';
But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:
compass: {
'default': {
options: {
sassDir: "css/sass/",
cssDir: "css/",
outputStyle: "compressed"
}
}
}
Related
I have a branding application where I would like to have this output:
/branding/
/default/
default.css
/brand1/
brand1.css
/brand2/
brand2.css
This one should be output from a branding folder with same structure but with .less files
So I would like to do something like this:
less: {
production: {
options: {
},
files: {
'dist/branding/**/*.css': 'branding/**/*.less'
}
}
}
I just seen examples on this where they all go to same folder, but I want to keep this dynamic because in my case there is like a ton of brandings, and the branding folders have more than just a css file, they also have other artifacts like images and so on.
Any suggestions?
If I understand you correctly you want LESS files under branding compiled to a dist/branding folder and to keep the folder structure.
To do that you would do something like this:
files: [
{
expand: true, // Recursive
cwd: "branding", // The startup directory
src: ["**/*.less"], // Source files
dest: "dist/branding", // Destination
ext: ".css" // File extension
}
]
You can visit http://rajdeepdeb.me/less-to-css-grunt-for-multiple-files/
Add the following configuration in your grunt file
...rest of the grunt configuration,
files: [{
expand: true,
cwd: '/',
src: ['**/*.less'],
dest: '/',
ext: '.css',
extDot: 'last'
}],
... rest of the grunt configuration
I have a bunch of various css from plugins and separate style sheets I am using, and I am trying to build a task that will combine and minify all of them. Right now I'm trying to do this with cssmin, I am not sure if I am on the right path, as this is my first time trying this, but here is what I am trying.
cssmin: {
target: {
files: {
'css/output.css': ['css/*.css', 'css/*.min.css']
},
files: [{
expand: true,
cwd: 'css',
src: ['css/output.css'],
dest: 'build/css',
ext: '.min.css'
}]
}
}
The idea is that it will take all css and min.css files in my css folder and combine them into 1 output.css then minify that build/css as a min.css file. I am not too sure if this is how this is suppose to work but this is my first attempt in trying so. The basic idea is combine and minify everything into 1 file in the bottom of my tasks (after I have auto prefixed and used uncss to strip bootstrap). I would appreciate any guidance, is this the right direction with this? This doesn't seem to work correctly, so would appreciate any help.
Thanks for reading!
I am not sure... but this works for me, and only have to include cssmin task in my grunt.registerTask line of code. It minifies all my autoprefixed .css, except the already minified versions and combine them into one big minified stylesheet. Hope it helps ^^
cssmin: {
minify: {
files: [{
expand: true,
cwd: 'src/styles',
src: ['**/*.css', '!**/*.min.css'],
dest: 'public/assets/styles',
ext: '.min.css'
}]
},
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'public/assets/styles/style.css': ['!public/assets/styles/**/*.min.css', 'public/assets/styles/**/*.css']
}
}
}
minify task is not necessary. When you concatenate several files, cssmin minifies the content automatically.
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'css/output.min.css': ['css/*.css', '!css/*.min.css']
}
}
}
I setup a grunt tast to compile all sass and scss files into css using grunt-contrib-sass.
The issue I am facing is because it's a modular architecture, I don't have a single sass and css folder.
Instead I have a sass and css folder for each module.
When I specify the module name it works and compiles the sass file into css, but only for that module, like so:
sass: {
dev: {
expand: true,
cwd: 'public/modules/someModuleName/sass',
src: ['*.{scss,sass}'],
dest: 'public/modules/someModuleName/css',
ext: ['.css']
}
}
Instead I need it to compile the sass files into css for each module dynamically, like so:
sass: {
dev: {
expand: true,
cwd: 'public/modules/**/sass',
src: ['*.{scss,sass}'],
dest: 'public/modules/**/css',
ext: ['.css']
}
}
Here is the folder structure:
|-public
|--modules
|---SomeModuleName1
|----Sass
|-----*.scss
|----CSS
|-----*.css
|---SomeModuleName2
|----Sass
|-----*.scss
|----CSS
|-----*.css
From the looks of the directory structure and based on the mean.io tag, I'm assuming you are using meanjs.org or mean.io.
What I did and recommend is that if you are going with sass, you go all in sass.
Rename your each css folder under public/modules/*/ to scss
Convert the existing *.css files to *.scss files
Create a new [style/scss/stylesheets] folder in the public directory
Create a new file(style.scss or main.scss) as the main style file. Recommend main.scss as a convention.
In your main.scss you import the module scss files:
#import "../modules/core/style/core";
#import "../modules/users/style/users";
This step is kind of annoying and I'm sure it can be automated somehow. (2 options below)
https://www.npmjs.com/package/grunt-sass-directory-import
https://github.com/chriseppstein/sass-globbing
For your sass task:
sass: {
options: {
sourcemap: 'none',
update: true
},
dev: {
options: {
lineNumbers: true
},
files: {
'public/dist/application.css': 'public/style/main.scss'
}
},
dist: {
options: {
style: 'compressed'
},
files: {
'public/dist/application.min.css': 'public/style/main.scss'
}
} },
Cleanup work to your gruntfile:
You would need to add clientSCSS to your watchFiles if you want and
run the sass:dev task.
csslint task is not needed and should be
replaced with scsslint.
cssmin task is not needed as the sass:dist
has the compressed option.
Cleanup work in all.js and production.js:
Remove references to *.css files in the assets:lib:css and assets:css with the exception of public/dist/application.css and public/dist/application.min.css
Use the corresponding sass version of bootstrap if you want instead and follow the #include approach in main.scss
I am attempting to use the grunt-contrib-less grunt task to compile my less files to css. What I would like to do is compile them inline, so that each .less file creates a single .css file.
Workflow:
1) Initial file system:
someFolder2
joe.less
rachel.less
someSubFolderA
jake.less
bob.less
someFolder4
someSubFolderB
ally.less
2) run grunt less
3) File system:
someFolder2
joe.less
rachel.less
joe.css
rachel.css
someSubFolderA
jake.less
bob.less
jake.css
bob.css
someFolder4
someSubFolderB
ally.less
ally.css
I have played around with various options but I can't figure out how to do this. Any suggestions would be greatly appreciated. This is the starting point grunt task I have been using:
less: {
paths: [
"src/someFolder2/**/*.less",
"src/someFolder4/**/*.less"
],
options: {
// outputSourceFiles: true
// compress: true,
// sourceMap: true,
// sourceMapFilename: "jake.txt"
// outputSourceFiles: true
}
}
This will (I think) concat all of the less files into a single CSS file.
You have to define task for grunt
options: {
paths: ["<%= cfg.dist %>/src/less"],
sourceMap: true,
rootpath: "<%= cfg.dist %>/",
relativeUrls: false,
cleancss: false
},
test: {
files: [
{
expand: true,
cwd: '<%= cfg.dist %>/src/less/',
src: ['*.less'],
dest: '<%= cfg.dist %>/build/css/',
ext: '.css'
}
]
}
/src/less/ - location of your less files
/build/css/ - folder where css will be generated
I'm building a site using the Yeoman generator: https://github.com/Thomas-Lebeau/generator-bootstrap-less.
I've installed fancybox using bower by doing the following:
bower install fancybox --save
add the fancybox script include into my usemin build block in index.html
#import "../bower_components/fancybox/source/jquery.fancybox.css"; into my only .less file
finally, copy across the fancybox vendor images using the following config in grunt's copy task.
code:
// Gruntfile.js
...
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}']
}, {
expand: true,
dot: true,
cwd: '<%= yeoman.app %>/bower_components/fancybox/source',
src: '**/*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/bower_components/fancybox/source'
}]
},
...
(Sorry, don't know why the formatting is glitched there.. https://gist.github.com/ptim/8555923)
This is working for me, but I'd like to take it a step further to get a better understanding of what's going on. It's working simply because I'm replicating the relative path used in app/ when I copy.
What I'd like is to have the bower assets copied in with my other images, and the paths in my html rewritten (as happens with imagemin and usemin, etc)
....
}, {
expand : true,
dot : true,
cwd : '<%= yeoman.app %>/bower_components/fancybox/source',
src : '**/*.{png,jpg,jpeg,gif}',
dest : '<%= yeoman.dist %>/images'
}]
....
How do I achieve that using the conventions of this package?
(I've seen alternate suggestions: How to rewrite urls of images in vendor CSS files using Grunt)
I've tried changing the dest: path, and adding flatten: true
Here's the trail I'm following:
grunt build finishes with copy, rev, usemin,
rev is adding a version number to the fancybox files
usemin is executes usemin:html and rewrites all the image filenames to match the rev'd files
usemin:css then runs, but doesn't list any rewrites, then grunt finishes:
Running "usemin:css" (usemin) task
Processing as CSS - dist/styles/cf3b732a.main.css
Update the CSS with new img filenames
Done, without errors.
Can anyone suggest a tweak for me?