Here is my workflow I have 20 scss files that are imported into one 'app.scss' see below
#import
"base/normalize",
"base/foundation/functions",
"base/settings",
"app/functions",
"app/mixins",
"app/components/icons",
etc
the SASS folder structure is organized 'SASS/base and SASS/base' root has one 'app.scss' file that imports everything
I compile compile and watch changes via 'Gruntfile.js' -- it looks something like this
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
watch: {
sass: {
files: 'sass/**/*.scss',
tasks: ['sass']
},
css: {
files: 'assets/**/*.css',
options: {
livereload: true
}
},
javascript: {
files: ['app/**/*.js', 'app/**/*.hbs'],
options: {
livereload: true
}
}
},
This is great for production but while in dev I would like to have different css files for debugging purposes..
is there a way of having multiple css files via Gruntfile and SASS for development without having to include 20 <link rel="stylesheet"... while in dev stage...
based on comment about using sourceMap, sourceComments here is what my grunt looks like
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
sourceComments: {
options: {
sourceComments: 'normal'
},
files: {
'assets/css/source-comments-app.css': 'sass/app.scss'
}
},
sourceMap: {
options: {
sourceComments: 'map',
sourceMap: 'source-map.css.map'
},
files: {
'assets/css/source-maps-app.css': 'sass/app.scss'
}
},
},
but am getting an error... is grunt suppose to get all the mapping information from app.scss for the sourcemap and sourceComments?
You can use a source map to easily identify which sass file a part of the compiled app.css comes from.
See the sourceComments and sourceMap options in the grunt-sass plugin.
I found the answer via grunt..after a lot of trials
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css',
sourceComments: 'map',
sourceMap:'assets/css/app.css.map'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
it has to be inside the options of the scss compile!
I'm using Grunt with Foundation 5 (a Foundation 5 Drupal subtheme, to be exact), and it worked when I added sourceComments: "map" to dist, like so:
dist: {
options: {
**YOUR OTHER OPTIONS HERE***
sourceComments: "map"
}
}
Related
I have installed bootstrap using sass, however my scss files are not compiling to the css folder.
I was able to install the bootstrap, using bower.
This is my gruntfile.js
/*jslint node: true */
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
loadPath: ['./bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
options: {
outputStyle: 'expanded',
sourceMap: false
},
files: {
'css/bootstrap.css' : 'stylesheets/_bootstrap.scss',
}
}
}, // sass
compass: {
dev: {
options: {
config: 'config.rb'
}
} // dev
}, //compass
watch: {
options: {
livereload: true,
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
} //date format function
}, //options
scripts: {
files: ['*.js']
}, // scripts
//Live Reload of SASS
sass: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['sass']
}, //sass
css: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['compass']
},
html: {
files: ['*.html']
}
}, //watch
postcss: {
options: {
processors: [
require('autoprefixer-core')({
browsers: 'last 2 versions'
})
]
}
}, //post css
jshint: {
options: {
reporter: require('jshint-stylish')
},
target: ['*.js', 'js/*.js']
} //jshint
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint']);
}
I would like to know, what step I am missing, because I have followed the directory paths correctly. My config.rb file, I have changed the sass directory to stylesheets.
When I run, sudo grunt, no errors are found but the stylesheet is not compiling.
In SCSS, files starting with _ (underscore) are typically ignored. See: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
This also applies to grunt-sass.
I have setup grunt task to concatenate the CSS files into a combined.css file and it successfully concatenates the CSS files.
grunt.initConfig({
concat: {
options: {
separator: '\n\n\n',
base: "../../../",
},
css: {
src: [ '../../my/demo/v1.0/1.css',
'../../my/demo/v1.0/2css',
'../../my/demo/v1.0/3.css',
],
dest: '../../my/demo/v1.0/combined123.css',
},
});
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('default', ['concat']);
However, I am not able to figure out how should I replace 1.css, 2.css and 3.css in the index.html with the combined123.css file using Grunt.
When manually trying to replacing these css files with the css files in index.html, running the grunt command reverts back the changes made to index.html. When I do the View Source Code for the page in browser, it shows the multiple css files instead of the latest concatenated combined123.css file.
How can I replace these css files with the combined123.css file in the tag of index.html, using the Grunt task.
This is the Gruntfile.js
grunt.initConfig({
root: root,
//concat:css task implemented here as mentioned in above code snippet
connect: {
server: {
options: {
port: grunt.option('port') || 9090,
keepalive: false,
base: "../../../"
}
}
},
open: {
all: {
path: 'http://localhost:<%= connect.server.options.port%>/my/demo/v1.0/dest/index.html'
}
},
watch: {
html: {
files: ['views/*.html', 'index_temp.html'],
tasks: ['mergeFiles']
},
livereload: {
files: ['dest/index.html'],
options: { livereload: true }
}
},
htmlbuild: {
dist: {
src: 'index_temp.html',
dest: '.tmp/',
options: {
beautify: true,
relative: true,
sections: {
headers: 'views/abc.html',
input: 'views/def.html',
}
}
}
},
replace: {
example: {
src: ['.tmp/index_temp.html'],
dest: 'dest/index.html',
replacements: [ {
from: /^\s*\n/gm,
to: ''
},
{
from: /\s+$/,
to: ''
}],
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('server', ['mergeFiles', 'open' ,'connect', 'watch' ]);
grunt.registerTask('default', ['mergeFiles', 'open' ,'connect', 'watch', 'concat']);
grunt.registerTask('mergeFiles', ["htmlbuild:dist", "replace:example"]);
Any help would be much appreciated.
I'm trying to run compass to compile my .scss files. I'm getting the following error:
Running "compass:dist" (compass) task
Compass can't find any Sass files to compile.
Is your compass configuration correct?.
If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
Running "watch" task
Waiting...
My .scss files are stored in /myproject/sass/ and /myproject/sass/bootstrap/
I'm expecting the .scss files to be compiled into a minified style.css file.
What do I need to do to sort this?
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-minified');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default',['concat', 'minified', 'uglify', 'compass', 'watch']);
This might be worth trying:
watch: {
sass: {
files: '/sass/**/*.scss',
tasks: ['default']
},
},
I fixed it by adding this code:
compass: {
compile: {
options: {
cssDir: 'css'
}
}
},
This compiles the css (does not minify). I also changed a couple of other values for the files and directories so my grunt file now looks like this:
compass: {
dist: {
options: {
sassDir: ['sass/**/*.scss', 'sass/*.scss'],
cssDir: 'css/style.css'
}
}
},
compass: {
compile: {
options: {
cssDir: 'css'
}
}
},
watch: {
css: {
files: ['sass/style.scss'],
tasks: ['compass']
}
}
I am trying to achieve a smooth workflow.
my problem:
My JS modifications are shown and minified and the live reload works fine. When I make changes to my SCSS files they do not run under the run command:
grunt
or the grunt plugin:
grunt watch
It only works when I invoke:
grunt sass
This was the output from the 'grunt sass' console window:
Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.
Done, without errors.
Notes:
When I run 'grunt watch' on a sass file I have noticed that grunt runs the minification on the javascript for no reason. Surely this be invoked when that file or one of its dependencies is effected?
Gruntfile.js Contents:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
files: ['css/*.css'],
livereload: true
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js', 'scss/*.scss'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: 'scss/',
src: ['*.scss'],
dest: 'css/',
ext: '.css'
}
},
concat: {
// 2. Configuration for concatinating files goes here.
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
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-lossy/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
},
png: {
options: {
optimizationLevel: 7
}
},
jpg: {
options: {
progressive: true
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);
};
I hope the above information helps. I have previously used Codekit, and it a really great app. I want to move to grunt but maybe my configuration file is incorrect I am close.
Any help would be greatly appreciated.
Neil
It looks like both of your issues occur within the watch configuration.
First, the reason the SASS task isn't working during watch is due to the files entry pointing to the wrong location. Your current files entry points to the "css" folder, but it should point to the "scss" folder, according to what you've specified in the actual "sass" task. In other words, your entry should be: files: ['scss/*.scss'].
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
Second, the JavaScript minification occurs during the watch whenever a SASS file changes because you have it listed here:
scripts: {
files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
Change it to files: ['js/*.js'], instead to have the watch task kick in for JavaScript files only.
Once you address those issues, if things are slightly working you might want to expand the patterns so that it covers all files in the subdirectories for your JavaScript, CSS, SASS, etc. For example, js/*.js includes all .js files under the js folder, while js/**/*.js covers the js folder and its subfolders. You can read more under the GruntJS "globbing patterns" documentation.
EDIT: here's how the updated watch should look like...
watch: {
options: {
livereload: true
},
// css is really for Sass
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
// scripts will detect js changes
scripts: {
files: ['js/**/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
spawn: false,
}
}
},
As mentioned, your individual tasks might need to use the ** pattern similar to what I've done with the "scripts" entry above: js/**/*.js
I am not sure why Grunt isn't generating my HTML?
Is there a mistake with my gruntfile?
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.initConfig({
uglify: {
my_target: {
files: {
'js/script.js': ['javascripts/*.js']
} //files
} //my_target
}, //uglify
sass: {
dist: {
options: {
sourcemap: true,
compass: true
}, //options
files:{
'stylesheets/style.css': 'sass/style.scss'
} //files
} //dist
}, //sass
haml: { // Task
dist: { // Target
files: { // Dictionary of files
'index.html': 'index.haml' // 'destination': 'source'
}
}
},
watch: {
options: { livereload: true },
scripts: {
files: ['javascripts/*.js'],
tasks: ['uglify']
}, //script
css: {
files: ['sass/*.scss'],
tasks: ['sass']
}, //sass
html: {
files: ['*.haml'],
task: ['haml']
}
} //watch
}) //initConfig
grunt.registerTask('default', ['haml', 'watch']);
} //exports
Old question, but I had the same issue, and here's what it was for anyone's future reference.
The gruntfile that I downloaded (like this one) had 'task' instead of 'tasks'. So the watch task is running, and you'll get notified that a file has changed, but no actual tasks will be run. Correct the typo and you're back in action!
Figure this out.
There is no problem with the code itself.
It is the terminal screwing up.