In my project I finally got rid of compass and using autoprefixer instead. I needed a new css compiler so I used the default grunt-contrib-sass module.
These are my settings:
sass: {
dist: {
files: [{
expand: true,
lineNumbers: true,
cwd: 'styles',
src: 'src/sass/app.scss',
dest: 'src/css/app.css',
ext: '.css'
}]
}
},
But it only outputs a sourcemap url. The paths to the files are correct. In app.scss I import all my sass files / modules.
Related
I am facing an issue with grunt-contrib-less plugin.
Problem Explanation
I have multiple less partials files which i am including in a main.less file. My grunt watch listen for changes in less files and run the less task. The problem is grunt contrib less is compiling the partials individually which throws error as some variable not define (which is actually defined in _var.less file).
I tried to negate the partials in my grunt file, but its not working.
here is my grunt config.
less: {
development: {
options: {
compress: false,
yuicompress: false/*,
optimization: 2*/
},
files: [
{
expand: true,
cwd: 'css/less',
//src: ['*.less'],
src: ['*.less', "!_*.less"],
// dest: 'dest/css/',
dest: 'css/',
ext: '.css'
}
]
}
},
watch: {
styles: {
files: ['css/less/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
Please tell me what is wrong here.
I've installed bootstrap-sass and grunt-sass, and want to customise the bootstrap components included in my build.
I've created a copy of _bootstrap.scss in my app/styles/ folder and need to override the default import paths - what changes do I need to make to my Gruntfile for this to work?
I've tried including the full path the Bootstrap partials in my _bootstrap.scss file, but that doesn't compile. Gruntfile extract below.
Gruntfile
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true,
sourceMapContents: true,
includePaths: ['.']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
Here is what I did using Grunt and Bower along with Bootstrap to make a custom install including / excluding bootstrap components which might help you.
Once I had Grunt and Bower set up I added bootstrap-sass using bower install boostrap-sass --save-dev so that my bower.json file was updated.
Modifying Bootstrap
I imported bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss into my my styles.scss file.
Then edited _bootstrap.scss commenting out which ever components I didn't want or need.
Next, created a file called _main.scss and stored this in a subdirectory (partials) of where my styles.scss file was, then imported _main.scss below the _bootstrap.scss.
This way I could override bootstrap if need be with my own custom styles by editing _main.scss.
Here's a starter grunt setup I used which might help explain the file structure.
Styles.scss file
// Bootstrap
#import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
// Custom styles
#import 'partials/main';
Gruntfile.js
module.exports = function(grunt){
// Configure task(s)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// setup uglify task
uglify: {
build: {
files: {
'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
},
},
dev: {
options: {
beautify: true,
mangle: false,
compress: false,
preserveComments: 'all'
},
files: {
'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
},
},
},
// setup watch task
watch: {
js: {
files: ['bower_components/**/*.js', 'src/js/*.js'],
tasks: ['uglify:dev']
},
css: {
files: ['src/scss/**/*.scss'],
tasks: ['sass:dev']
},
},
// setup sass
sass: {
dev: {
options: {
outputStyle: 'expanded'
},
files: {
'css/styles.min.css' : 'src/scss/styles.scss'
},
},
build: {
options: {
outputStyle: 'compressed'
},
files: {
'css/styles.min.css' : 'src/scss/styles.scss'
},
},
},
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
// Register task(s)
grunt.registerTask('default', ['uglify:dev','sass:dev']);
grunt.registerTask('build', ['uglify:build', 'sass:build']);
};
From there you should be able to add your own custom bootstrap styles and / or remove components from bootstrap you don't want. Then just run grunt or grunt build depending on whether you want a development output (non minified or not). Or grunt watch while you are editing for instant compile. Add in livereload chrome extension and the app and you'll have live updates across all files.
A couple of months late.. but hope this helps!
I'm having trouble using grunt-contrib-imagemin, insofar as I can't get it to compress any images.
Here's my Gruntfile.js
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/{base,global,medium,large}.css', // All CSS in the CSS folder
],
dest: 'css/build/production.css',
}
},
cssmin: {
build: {
src: 'css/build/production.css',
dest: 'css/build/production.min.css'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'if3/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'imagemin']);
}
When I run grunt from the command line, each of concat and cssmin run fine, whereas imagemin - although running without errors - returns the following message.
Running "imagemin:dynamic" (imagemin) task
Minified 0 images (saved 0 B)
For info, my folder structure is as follows.
if3\
css\
*.css
images\
*.png
*.jpg
js\
*.js
node_modules\
etc.
Gruntfile.js
package.json
*.html
The image folder currently contains 7 PNG and 2 JPG files, but I can't figure out why it's not doing anything with them.
Any help much appreciated.
Thanks
your src-properties in your concat and cssmin tasks do not contain if3. your imagemin config does. removing that should probably help...
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
you don't need use: dynamic {} or static {} and will works perfect.
see: Grunt imagemin running but not minifying
Starting to use Sails with Jade template is easy with the command:
sails new app --template=jade
How to add Stylus as default CSS preprocessor? (with the latest Sails version)
Its a few step process, first add
First npm install grunt-contrib-stylus then create a file /tasks/config/stylus.js and add:
module.exports = function(grunt) {
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['style.styl'],
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
};
then add, 'stylus:dev' to /tasks/register/compileAssets.js && syncAssets.js
after that add 'styl' to /task/register/copy.js for files to ignore
And it should all work, this is my first stackoverflow answer xD
I wasn't able to find a better way to add Stylus to the latest Sails, than using grunt:
Add grunt-contrib-stylus to project dependencies:
npm install grunt-contrib-stylus --save
Create a new grunt task stylus.js under tasks/config directory:
module.exports = function(grunt) {
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['importer.styl'], //Edit this to match your files
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
};
Task will be executed automatically on sails lift, check result in .tmp/public/styles
Go to tasks/config and add a stylus.js file with the following code:
module.exports = function(grunt){
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['main.styl'],
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
}
Then go to tasks/register (which what previous answers missed) and add in both syncAssets.js and compileAsset.js where relevant:
'stylus:dev'
Looking at this pull it looks like it's already built into sails.
If it doesn't work automatically then it can probably be configured in the gruntfile.
Am using grunt and cssmin to minify my css.
However, in my css assets folder, I have some css that has a .min.css extension. So when I run grunt, only files with .css in my source folder will be minified to be in the build folder. Those files that have .min.css in the source folder will be found in the build folder, but the .min extension will be lost. ie bootstrap.min.css will become bootstrap.css
My Gruntfile.js is as below
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'resources/front/js',
cwd: 'assets/front/js'
}]
}
},
cssmin: {
minify: {
expand: true,
cwd: 'assets/front/css/',
src: ['*.css', '*.min.css'],
dest: 'resources/front/css/',
ext: '.css'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['uglify','cssmin']);
};
Is there any way that the .min.css files can still be minified and be in the build folder and retain the correct '.min.css' extension?
EDIT
See this answer for the most control over file name renaming.
Try this:
cssmin: {
minify: {
files: [{
expand: true,
cwd: 'assets/front/css/',
src: ['*.css', '!*.min.css'],
dest: 'resources/front/css/',
ext: '.css'
}, {
expand: true,
cwd: 'assets/front/css/',
src: ['*.min.css'],
dest: 'resources/front/css/',
ext: '.min.css'
}]
}
}
The first files block will minify only the *.css files and retain the .css extension of those files. The second files block will minify only the *.min.css files and retain the .min.css extension of those files.
I use grunt-contrib-copy: just copy *.min.css to dest.
First of all,exclude all *.min.css files
cssmin:{
min:{
files:[{
expand:true,
cwd:'css',
src:['*.css','!*.min.css'],
dest:'release/css',
ext:'.min.css'
}]
}
}
Second,Copy all *.min.css from css folder as src to release/css folder as dest
copy:{
main:{
files:[{
// Copy *.min.css
expand:true,
src:['css/**/*.min.css'],
dest:'release/'
}]
}
}