I want to create targets like this:
grunt/sass.js:
'use strict';
module.exports = {
alpha: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app2.scss'
}
}
}
};
Gruntfile.js:
module.exports = function (grunt) {
require('load-grunt-config')(grunt);
};
I can't get this working properly. Only when I recode the sass.js file into the following Grunt compiles it into CSS:
module.exports = {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss'
}
}
};
How can I create those targets so I can execute commands like 'grunt sass:alpha', so I can create several templates.
Was able to solve it by changing grunt/sass.js to this:
'use strict';
module.exports = {
options: {
includePaths: ['bower_components/foundation/scss']
},
alpha: {
options: {
outputStyle: 'compressed'
},
files: {
'css/alpha.css': 'scss/app_alpha.scss'
}
},
beta: {
options: {
outputStyle: 'compressed'
},
files: {
'css/beta.css': 'scss/app_beta.scss'
}
}
};
Related
It compiles a single scss file to css.
But if there are in that for example: "#import "variables/_colors.scss";" it is not working.
It is just a guess that this is the reason.
What is missing?
This is my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
uses_defaults: {}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'sites/all/themes/tarsoly/sass/',
src: ['**/*.scss'],
dest: 'sites/all/themes/tarsoly/css/',
ext: '.css'
}]
}
},
watch: {
css: {
files: 'sites/all/themes/tarsoly/**/*.scss',
tasks: [ 'sass' ],
options: { livereload: true }
}
},
});
// Default task(s).
grunt.registerTask('default', ['watch']);
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');
};
I have the following gruntfile, that compiles fine, however it appears to be ignore the style option and only use the default 'nested' style. I've tried compressed, expanded and compact and they all come out exactly the same.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'css/style.css' : 'scss/main.scss'
},
options: {
sourceMap: true,
style: 'expanded'
}
}
},
sass_globbing: {
your_target: {
files: {
'scss/_base.scss': 'scss/base/**/*.scss',
'scss/_layout.scss': 'scss/layout/**/*.scss',
'scss/_components.scss': 'scss/components/**/*.scss',
'scss/_theme.scss': 'scss/theme/**/*.scss'
},
options: {
useSingleQuoates: false
}
}
},
autoprefixer: {
dist: {
options : {
browsers: ['last 2 version','ie 8','ie 9','android 4']
},
files: {
'css/style.css' : 'css/style.css'
}
}
},
watch: {
options: {
livereload: true
},
css: {
files: '**/*.scss',
tasks: ['sass_globbing','sass','autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
I'm using:
grunt-cli v1.2.0
grunt v0.4.5
I've tried adding changes to the scss files, deleting the stylesheet, generating a totally new file with a different name, running grunt sass --force and it still generates the same file (and it is generating the file). I've also tried overriding the style in grunt with grunt sass --style compact --force, and still no joy.
What am I doing wrong?
According to the documentation at https://github.com/sindresorhus/grunt-sass#usage, the options key goes one level higher (Move it out of dist):
grunt.initConfig({
sass: {
options: {
sourceMap: true,
style: 'compressed'
},
dist: {
...
}
}
}
Hope this helps!
I am trying to include a call to grunt-contrib-compass in my watch task, but it's not registering any saved changes to my .scss files. grunt compass works fine, and grunt watch records all other changes to *.php as expected. What's a guy doing wrong here?
gruntfile.js:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} //dev
}, //compass
watch: {
options: { livereload: true },
scripts: {
files: ['/scripts/*.js'],
}, //scripts
sass: {
files: ['/_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch
}) //initConfig
grunt.registerTask('default', 'watch');
} //exports
And just for kicks, my config.rb:
css_dir = '/css'
sass_dir = '/_sass'
output_style = :nested
Your leading '/' in all your paths are throwing you off, remove them (both from gruntfile and config.rb):
watch: {
options: { livereload: true },
scripts: {
files: ['scripts/*.js'],
}, //scripts
sass: {
files: ['_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch
I have some like this in my gruntfile.js:
sass: {
app: {
files: {
'<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
}
},
options: {
style: 'nested'
}
},
grunt.registerTask('default', ['sass']);
But this is only one task. How I can combine two or more tasks?
As I know in some grunt modules you can combine multiple tasks like this:
sass: {
dev: {
app: {
files: {
'<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
}
},
options: {
style: 'nested'
}
},
production: {
app: {
files: {
'<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
}
},
options: {
style: 'compressed',
sourcemap: 'none'
}
}
},
// and then register tasks
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('prod', ['sass:production']);
But this doesn't work, GruntJs didn't show mistake and didn't compile sass. What is wrong with this?
There is a dirty hack but it works for me at least. But at first I would suggest to migrate to Gulp where is such as simple task a peace of cake. So in sort you will create default configuration for sass in initConfig function and then I'll register task with callback function where all magic happens. There you will override default setting, and finally you can run grunt sassTask or whatever name will be.
grunt.registerTask("sassTask", function() {
grunt.config.data.sass = {
dist: {
files: {
'test.css': 'test.scss'
}
}
};
grunt.task.run('sass');
});
I find my mistake, it would run this tasks in such way:
sass: {
dev: {
files: {
'<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
},
options: {
style: 'nested'
}
},
production: {
files: {
'<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
}
options: {
style: 'compressed',
sourcemap: 'none'
}
}
}
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('prod', ['sass:production']);
I'm trying to set up grunt-contrib-sass so I can use grunt to handle sass-to-css compiling. I installed after scaffolding a basic grunt file with grunt init:makefile. When I ran grunt sass just to test stuff, Terminal returns a "no "sass" targets found."
My setup:
$sass -v returns "Sass 3.2.1"
$ruby -v returns "ruby 1.9.3p194"
the 'node_modules' folder contains 'grunt-contrib-sass'
based on the grunt-contrib-sass docs, my grunt.js file currently looks like this:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
},
test: {
files: ['test/**/*.js']
},
watch: {
files: '<config:lint.files>',
tasks: 'lint test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true
},
globals: {},
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'main.css': 'main.scss', // 'destination': 'source'
'widgets.css': 'widgets.scss'
}
},
dev: { // Another target
options: { // Target options
style: 'expanded'
},
files: {
'main.css': 'main.scss',
'widgets.css': [
'button.scss',
'tab.scss',
'debug.scss'
]
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', 'lint sass');
};
Any and all help is appreciated...thanks much!
Double check your closing curly braces. Your sass block is within your jshint block. Try this:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
},
test: {
files: ['test/**/*.js']
},
watch: {
files: '<config:lint.files>',
tasks: 'lint test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true
},
globals: {},
},
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'main.css': 'main.scss', // 'destination': 'source'
'widgets.css': 'widgets.scss'
}
},
dev: { // Another target
options: { // Target options
style: 'expanded'
},
files: {
'main.css': 'main.scss',
'widgets.css': [
'button.scss',
'tab.scss',
'debug.scss'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', 'lint sass');
};