Hi all,
Following this question : https://github.com/gruntjs/grunt-contrib-sass/issues/190
I'm trying to specify the 'dest' option depending on the 'src' one.
The only difference is the /scss that has to be removed.
Here is a sample of my current code :
sass: {
dist: {
options: {
style: 'expanded',
sourcemap: 'none',
trace: true,
},
files: {
'./css/laptop.css': './scss/css/laptop.scss',
....
... (160 more lines)
....
'./css/player.css': './scss/css/player.scss'
}
}
},
I tried
files: [{
expand: true,
src: ['**/*.scss'],
dest: function(path) { return path.replace(/(\/scss)/,"") },
ext: '.css'
}]
But apparently Warning: Arguments to path.join must be strings Use --force to continue.
Thanks!
After some research I discovered grunt-newer which can be used this way:
css:{
files: [
'./scss/**'
],
tasks: ['newer:sass'],
livereload: {
options: { livereload: true },
files: ['./**'],
},
}
It's not what I was trying to do exactly but It optimised perfectly the grunt process. Really nice plugin!!
Related
How set up different tasks of grunt-contrid-sass for dev and prod?
I need different css-files - with and without sourcemaps.
I tried:
sass: {
dev: {
options: {
sourcemap: 'inline',
},
},
prod: {
options: {
sourcemap: 'none',
},
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
But in this case sass:dev task doesn't compile any files.
When I try:
sass: {
dev: {
options: {
sourcemap: 'inline',
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
prod: {
options: {
sourcemap: 'none',
},
files: {
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
},
},
}
I get a warning with suggestion to use "--force". But even with using "--force" I get no compiled files.
Is there any way to do it?
Your second example is close to what it should be. However the value of each files property should be an Array which contains an Object as shown in this example in the docs.
For instance, it should be:
files: [{
//...
}]
and NOT:
files: {
//...
}
Change your saas task to the following instead:
sass: {
dev: {
options: {
sourcemap: 'inline'
},
files: [{ // <-- change this
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
}] // <-- change this
},
prod: {
options: {
sourcemap: 'none'
},
files: [{ // <-- change this
expand: true,
cwd: 'static/compass/sass/pages/redesign/',
src: ['**/*.scss'],
dest: 'static/compass/css/pages/redesign/',
ext: '.css'
}] // <-- change this
}
}
EDIT
Note: You should also consider changing your dest path in either the dev or prod targets (or both) because currently they are the same path, i.e. if you run both sass:prod and sass:dev the output from one task will overwritten by the other.
This task doesn't do anything:
sass: {
options: {
style: 'expanded',
sourceMap: true,
importer: compass
//includePaths: sassLib
},
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['globbed/style.scss'],
dest: 'css',
ext: '.style.css'
}]
}
},
But this is working, it compiles the style.scss to style.css:
sass: {
dist: {
files: {
'css/style.css': 'scss/globbed/style.scss',
}
}
}
What should I modify in the first task?
Try to move the options object into the dist one. Alternatively, since you are using Compass, you could try to use the grunt-contrib-compass module for an easier approach. In your case the code could be:
// ...
compass: {
compile: {
options: {
sassDir: "scss",
cssDir: "css",
relativeAssets: true,
outputStyle: "expanded"
}
}
},
// ...
When using grunt-watch while editing my SASS files, if I get a SASS error, I have to save twice after correcting the error for it to be resolved. Here's the sequence of events:
I include a mixin that doesn't exist in my SASS file and save
grunt-watch throws a SASS error
I fix the error and save
grunt-watch throws the same error
I save again
grunt-watch compiles correctly
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img',
src: ['assets/img/**/*.{png,jpg,gif}'],
dest: 'assets/img'
}]
}
},
sass: {
dist: {
options: {
loadPath: require('node-neat').includePaths,
style: 'compact',
lineNumbers: true,
cacheLocation: 'assets/sass/.sass-cache'
},
files: [{
expand: true,
cwd: 'assets/sass',
src: ['*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
images: {
files: ['assets/img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false
}
},
js: {
files: ['assets/js/**/*.js'],
options: {
spawn: false
}
},
html: {
files: ['*.html'],
options: {
spawn: false
}
},
php: {
files:['**/*.php'],
options: {
spawn: false
}
}
}
});
// List plugins we're using
grunt.loadNpmTasks('grunt-contrib-watch'); // Watch - http://goo.gl/yxNE0
grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image Minify - http://goo.gl/mkIRPE
grunt.loadNpmTasks('grunt-contrib-sass'); // SASS - http://goo.gl/pCHySn
grunt.loadNpmTasks('grunt-newer'); // Newer - https://goo.gl/3vBTnf
// Plugins to run when we run the 'grunt' command
grunt.registerTask('default', [
'imagemin',
'sass'
]);
};
Turns out that mysterious spawn option in Watch actually needs to be set to true for this particular instance. Like most people, I really have no idea how spawn works, but it fixes the issue.
watch: {
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: true
}
}
}
You don't have to explicitly set the option to true, it's set by default so you can just not add it at all. I'm just including it here as an example.
I'm trying to work out how to compile a single file as well as a directory and for the life of me I cannot get it to work.
sass: {
dev: {
options: {
style: 'expanded'
},
files: [
{'style.css': 'style.scss'},
{
expand: true,
cwd: '/scss/',
src: '*.scss',
dest: '/css',
ext: '.css'
}]
}
}
This only seems to compile the style.css and ignores the directory.
Because of WordPress' weird requirements, having the style.css file separate (one level up) from the CSS directory is quite common. An example would also be useful for compiling multiple directories too.
I assumed that to work too. It might be a bug in grunt. Feel free to open a ticket.
You can use multiple targets to work around it in the meantime:
sass: {
options: {
style: 'expanded'
},
dev: {
files: [{
expand: true,
cwd: '/scss/',
src: '*.scss',
dest: '/css',
ext: '.css'
}]
},
dev2: {
files: [{'style.css': 'style.scss'}]
}
}
I can't get a lot of contrib-sass features to work in grunt. I dived into grunt a day ago and I found it really good.
Link to contrib-sass repo which says sourcemaps should be working:
https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037
note: I have sass bleeding edge, and this feature works fine if I use: sass --watch --scss --sourcemap --no-cache with google chrome canary sourcemaps and Sass stylesheet debugging
here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',
concat: {
options: {
separator: '\n// New file\n',
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
]
},
vendor: {
files: [
{ src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
]
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['<%= concat.develop.files[0].dest %>'], dest: 'js/concDev.min.js' }
]
},
vendor: {
files: [
{ src: ['<%= concat.vendor.files[0].dest %>'], dest: 'js/concVend.min.js' }
]
}
},
removelogging: {
dist: {
files: [
{ src: ['js/concDev.min.js'], dest: 'js/concDev.min.js' },
{ src: ['js/concVend.min.js'], dest: 'js/concVend.min.js' },
{ src: ['js/concDev.js'], dest: 'js/concDev.js' },
{ src: ['js/concVend.js'], dest: 'js/concVend.js' }
]
}
},
jshint: {
files: ['gruntfile.js', 'js/develop/*.js'],
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
cssmin: {
compress: {
options: {
banner: '<%= banner %>'
},
files: [
{ src: ['css/main.css'], dest: 'css/main.min.css' }
]
}
},
imagemin: {
dynamic_mappings: {
files: [
{
expand: true,
cwd: 'img/',
src: ['**/*.png', '**/*.jpg'],
dest: 'img/',
ext: '.png'
}
]
}
},
sass: {
compressed: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
outputStyle: 'compressed'
}
},
nested: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
sourcemap: true,
outputStyle: 'nested'
}
}
},
rsync: {
deploy: {
src: "./",
dest: '<%= connection.dest %>', // i.e. "var/www"
host: '<%= connection.host %>', // i.e. "user#server.com"
recursive: true,
syncDest: false,
exclude: ["/node_modules", ".*"]
}
},
watch: {
options: {
livereload: true
},
html: {
files: '*.html'
},
js: {
files: ['js/develop/plugins.js', 'js/develop/main.js'],
tasks: ['jshint', 'concat:develop']
},
css: {
files: 'css/develop/main.scss',
tasks: ['sass:nested']
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks("grunt-remove-logging");
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-rsync');
// Task Lists
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', 'sass:nested']);
grunt.registerTask('server', ['watch']);
grunt.registerTask('deploy', ['sass:compressed', 'rsync' ]);
};
Btw, as I said im totally new with grunt, if you find other bad practise in my code please let me know. Also great plugin names for ftront-end work always welcome, I saw there are many, only faminilar with a few contrib ones yet.
Note: Somewhy, a lot of sass options doen't work, for example: noCache, lineNumbers, debugInfo, outputStyle:'compact','expanded' (compressed, nested works oO)
~ ae
As of today (07/10/2013):
If you install pre version of sass
gem install sass --pre
and grunt-contrib-sass package, your config file will allow to generate sourcemaps.
If you use compass try using compass: true option in sass task config block or loadPath
I was able to get this to work using the following:
* one note: the map file doesn't get tracked anywhere so I didn't realize it was rewriting it until I deleted a version of the map and then I noticed that it was writing the file.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: {
'styles/styles.css' : 'styles/sass/styles.scss'
}
},
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
sourceComments: 'normal'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Just to provide this as an actual answer, sourcemaps aren't available in sass stable yet. They're being worked on in an alpha release. The original question referenced a commit message that noted the code was being future-proofed.
As of 6/24/2013, sourcemaps aren't available in grunt-contrib-sass or grunt-contrib-compass.
It's easy right now, SASS version 3.4.5 works with source maps very well and has some more options to set it up:
$ sass -h
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
[...]
Input and Output:
--scss Use the CSS-superset SCSS syntax.
--sourcemap=TYPE How to link generated output to the source files.
auto (default): relative paths where possible,
file URIs elsewhere
file: always absolute file URIs
inline: include the source text in the sourcemap
none: no sourcemaps
[...]
So you can configure your Gruntfile.js e.g. like this:
[...]
sass : {
dist : {
files : {
'example.css' : 'example.scss'
},
options: {
sourcemap: 'auto'
}
}
}
[...]
Now if you run grunt sass task source maps are generated automatically.