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
Related
I am trying to compile scss files with grunt. Using theses modules
grunt-contrib-sass
grunt-contrib-watch
grunt-contrib-concat
that being said, all my regular css files gets compiled into my main css file but none of my .scss files does. I have tried to manually compile my files in command line and it does work fine (sass styles.scss:style.css), so it has nothing to do with my .scss or ruby. What am I doing wrong?
This is how my Gruntfile.js looks like
require('time-grunt')(grunt);
var jsFileList = [
'bower_components/slick-carousel/slick/slick.js',
'sources/js/dom_ready.js'
];
var cssFileList = [
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/slick-carousel/slick/slick.css',
'sources/sass/styles.scss',
'sources/sass/responsive.scss',
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/styles.css': cssFileList
}
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
watch: {
css: {
files: cssFileList,
tasks: ['sass'],
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default', [
'sass',
'concat'
]);
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
I found a way to do it using concat.
The first thing to do is to merge all you scss and css into one bigger scss files (which I called for convenience concat.scss).
Then you can generate that scss file using sass task.
This is how your Gruntfile.js should look.
var jsFileList = [
...
];
var cssFileList = [
...
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
js: {
src: cssFileList,
dest: 'sources/sass/generated/concat.scss'
},
css: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
sass: {
dist: {
options: {
noCache : true,
style: 'compressed',
sourcemap: "none"
},
files:{
'assets/css/styles.css' : 'sources/sass/generated/concat.scss'
}
}
},
watch: {
css: {
files: cssFileList,
tasks: ['concat','sass']
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default',[
'concat',
'sass'
]);
grunt.registerTask('sass',['concat','sass']);
Your file structure should look like this
/root
/bower_components
...
/assets
/css
styles.css
/js
script.js
/sources
js
...
sass
/generated
concat.scss
/inc
...
/main
...
styles.scss
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!
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 am just getting started with Grunt and am a bit confused about how to configure my gruntfile.js to recognize changes to sass partial files. I've followed the article on 24ways.org by Chris Coyier and feel pretty comfortable with the basics. When running grunt watch, I can make changes to my style.scss file and grunt will watch and compile changes. However, I typically use style.scss as a long list of #imports:
#import 'partials/partialfilename';
When I make a change to any of my partials grunt does not notice anything has changed and thus nothing is compiled.
Within my project directory I have a sass directory that includes a style.scss file and a partials directory with lots of partials.
here is my grunt file:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/custom.js',
'js/foundation.js',
'js/jquery.listnav.js',
'js/jquery.ioslider.min.js'
],
dest: 'js/build-scripts.js',
}
},
uglify: {
build: {
src: 'js/build-scripts.js',
dest: 'js/build-scripts-min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
},
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
},
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
images: {
files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);
};
I have tried a few different options for the watch css arguments such as:
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
and
css: {
files: ['sass/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
I realize that I may be 'missing the point' here, I have read a bit about the grunt sass plugin 'ignoring' (_) underscores or partials because of the sass globbing rule (?) and through my research I have noticed that most people are using compass in their projects which I am not.
So, again my question is: How can I configure grunt to watch and compile changes to my sass partials and compile my css correctly?
I have found a solution.
css: {
files: ['sass/*.scss'],
files: ['sass/partials/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
My watch command executes all my tasks except for sass. When I execute grunt sass, I receive the following message error:
Warning:
You need to have ruby and sass installed and in your path for this task to work.
I don't know why this message is showed because I can generate my .css file from the .scss through the Ruby console (sass --watch styles/scss/general.scss:styles/css/general.css), so I have both Ruby and sass installed.
My Gruntfile.js is the following:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/optimized/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'styles/css/general.css': 'styles/scss/general.scss'
}
}
},
watch: {
scripts: {
files: ['**/*.{png,jpg,gif}', 'js/libs/*.js'],
tasks: ['imagemin', 'concat', 'uglify'],
options: {
spawn: false,
}
},
sass: {
files: ['css/*.scss'],
tasks: ['sass']
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'watch', 'sass']);
};
My OS is Windows7. Any idea?
Try
var config = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
cwd: 'styles/scss/',
src: '*.scss',
dest: 'styles/css/',
ext: '.css'
}],
},
watch: {
sass: {
files: ['styles/scss/{,*/}*.scss'],
tasks: ['sass'],
options: {
livereload: true
}
}
}
};
and would be better to place all the grunt.loadNpmTasks at the top before the grunt.initConfig