I want to get a basic pre-processing workflow in place. I've set up a directory structure like this:
- website-root
- - index.html
- - css
- - pre-processing
- - - Gruntfile.js
- - - package.json
- - - sass
- - - - test.scss
I'm using Grunt, as I'd like some advanced build actions in future. I'm also using Compass as I'd like to use its mixins etc.
What I want to do for now is simply set up a watch task to compile 'test.scss' into a 'test.css' file inside the css folder in the website root. However, no matter what I try, when I type 'compass watch' into the console and then change the contents of the 'test.scss' file, the result is that the 'test.css' file is always compiled into a new folder called 'stylesheets' in the 'pre-processing' folder.
The Gruntfile.js contents are:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: 'scss/',
cssDir: '/css/',
relativeAssets: true
}
}
},
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['compass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['compass:dev']);
}
The package.json file contains this:
{
"name": "Test",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.1"
}
}
So the cssDir option in Gruntfile.js seems to have no impact.
Can anyone suggest why this is happening? I'm a total pre-processing newby so could be missing something obvious!
Thanks.
When you type 'compass watch', you're running compass directly. You're trying to get this working using grunt. You need to type 'grunt watch'.
Related
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I find Web Essentials autoprefixer not auto enough - I need to manually say it to add prefixes. Also it doesn't offer me prefixes when I'm writing .less or .scss.
Is there any extension or option to make it automatically add prefixes on css compilation from .less or .scss stage?
I've tried Web Compiler extension, but it doesn't support prefixing for sass, and says that it supports prefixing for less, but I've tried enabling autoprefix in compilerconfig.json while writing .less and it didn't add anything.
Is there something for visual studio? Or maybe I should dump it and use some editor + gulp?
I'm sure there will be an extension out there but it isn't too much work to create a Grunt/Gulp file to do your compiling for you. Task Runner Explorer will then manage the running of the file. Writing your own will give you the control and the flexibility that an extension will not.
Here is a sample using Grunt, taken from my post on the subject Getting started with Grunt, SASS and Task Runner Explorer
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};
Here is a basic view of my "watch" grunt task:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
watch: {
options: {
livereload: true,
},
gruntfile:{
files:['gruntfile.js'],
tasks:['default']
},
html: {
files: ['index.html', 'assets/templates/*.html'],
tasks: ['default']
},
js: {
files: ['assets/js/*.js'],
tasks: ['default']
},
sass: {
options:{
livereload:false
},
files:['assets/sass/*.scss'],
tasks:['buildcss'],
},
css:{
files:['assets/sass/*.scss'],
tasks:[]
},
},
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['htmlhint','buildjs', 'buildcss', 'browserSync', 'watch','serve']);
};
So I have buildcss that compiles and minifies my scss into a master.css file. I've set up watch to watch the scss for changes, run the buildcss task, and then run the default task once the master.css file is updated. Then it should then refresh the page.
However, whenever I make a change to the scss file and save it, terminal shows no file updates even though it is apparently "watching files...". The only files that show as updated when I make changes are the html files: index and templates. It makes no sense to me. Sorry, I'm configuring Grunt for the first time here.
I was confusing watch and browserSync instead of using them together. First, I had to add watchTask: true, to browserSync, then I had to ensure that browserSync was being called before watch, and then I had to add the snippet of code the console prodded me to add to my index.html. Now it works perfectly. Here is the site I used to find my way: http://blog.teamtreehouse.com/getting-started-with-grunt
I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.
My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.
Here's my current gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// CONFIG =========================/
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/style.css' : 'assets/css/sass/*.scss'
}
}
},
watch: {
css: {
files: 'assets/css/sass/*.scss',
tasks: ['sass']
}
}
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// TASKS =====================================/
grunt.registerTask('default', ['watch']);
};
Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.
At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.
I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:
#import "vendor/*";
#import "modules/*";
#import "partials/*";
And then your grunt file would have something like:
sass: {
dist: {
options: {
require: 'sass-globbing'
},
files: {
'assets/css/style.css' : 'assets/css/sass/style.scss'
}
}
}
I am trying to run my first project using grunt. i am stuck at the point when i try running grunt in the command line i get an error/warning like this:
Traviss-MacBook-Pro-2:GRUNT Travis$ grunt compass
>> Local Npm module "grunt-contrib-jshint" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
Warning: Task "compass" not found. Use --force to continue.
Aborted due to warnings.
I installed both jshint and qunit so i am lost on what to do next for fixing this problem.
Any help would be greatly appreciated, thank you.
Here is my grunt.js file
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};
You probably don't have the 'grunt-contrib' modules that use qunit and jshint in a grunt task form. You should be able to check with something like npm ls | grep contrib.
I'd suggest, within your project, running:
npm install grunt-contrib-jshint --save-dev
and
npm install grunt-contrib-qunit --save-dev
I would've expected some of the other grunt.loadNpmTasks()-specified modules to choke too, so I'm a little surprised more errors are not happening.
As for "Warning: Task "compass" not found", there is no 'compass' target in your gruntfile (as there is for qunit, watch, etc.), so that makes sense. You'll either want to add in a 'compass' task to do stuff under that name or specify another target to grunt on the command-line (or omit any specific target to execute your default ['jshint', 'qunit', 'concat', 'uglify'] tasks).