I'm using grunt-contrib-compass to process my SCSS files into a single CSS file. Basically, compass considers all the SCSS files matching app/styles/**/*.scss and compile them into .tmp/styles/main.css.
I would like to split this behavior into :
app/styles/specific/**/*.scss to .tmp/styles/specific.css
app/styles/**/*.scss to .tmp/styles/main.css (ignoring specific)
However, I have no idea how to configure grunt regarding my configuration file which is quite simple :
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
relativeAssets: true
}
I couldn't figure out any solution especially since the compass documentation states that cssDir and sassDir only allows string as a parameter. Does this has to be done in an other task?
I think you should try grunt-contrib-sass that have internal support for compass:
https://npmjs.org/package/grunt-contrib-sass
from documentation:
compass
Type: Boolean
Default: false
Make Compass imports available and load project configuration
(config.rb located close to the Gruntfile.js).
And you can use global patterns of gruntjs:
http://gruntjs.com/configuring-tasks#globbing-patterns
sass: {
dist: {
files: [
{
src: 'app/styles/specific/**/*.scss',
dest:'.tmp/styles/specific.css'
},
{
src: ['app/styles/**/*.scss', '!app/styles/specific/**/*.scss'],
dest:'.tmp/styles/main.css'
}
]
}
}
Related
I am new to grunt. Can anybody tell me how to configure grunt in .NET 6 MVC project?
I want that all the JavaScript files located at "wwwroot\lib\custom\js" folder should get minify and go at this location "wwwroot\js\minified\scripts"
I do not want to bundle everything into one file rather I am looking to minify these files separately like this:
Files at this location wwwroot\js\minified\scripts will look like below:
product.min.js
common-methods.min.js
I would also like to minify my CSS files and put at this "wwwroot\js\minified\css" location. I found this link helpful but somehow it is not working for me. Also that would be much helpful, if somebody can tell me how to configure "grunt-contrib-watch" as well?
Here is my package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"grunt": "1.5.3",
"grunt-contrib-clean": "2.0.1",
"grunt-contrib-jshint": "3.2.0",
"grunt-contrib-concat": "2.1.0",
"grunt-contrib-uglify": "5.2.2",
"grunt-contrib-watch": "1.1.0"
}
}
and my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
options: {
compress: true
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask("default", ["uglify"]);
}
Can anybody help me configure this?
Your gruntfile.js will look this
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
minifyJs: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/js/',
src: ['**/*.js'],
dest: 'wwwroot/js/minified/scripts/',
ext: '.min.js',
extDot: 'first'
},],
},
},
cssmin: {
webStyles: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/css/',
src: ['**/*.css'],
dest: 'wwwroot/js/minified/css/',
ext: '.min.css'
}]
}
},
watch: {
minifyJs: {
expand: true,
files: "wwwroot/lib/custom/js/**/*.js",
tasks: ["uglify:minifyJs"]
},
webStyles: {
expand: true,
files: "wwwroot/lib/custom/css/**/*.css",
tasks: ["cssmin:webStyles"]
},
options: {
spawn: false,
event: ['all']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask("default", ["watch"]);
}
You can refer the documentation for more information.
I'm new to Grunt and am following this tutorial.
I'm having a heck of a time trying to get Grunt to compile Sass. I keep getting the following when I run grunt sass:
Loading "sass.js" tasks...ERROR
>> SyntaxError: Unexpected token (
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
node: v6.11.0,
npm: v6.4.1,
grunt cli: v1.3.2
package.json:
{
"name": "yb",
"version": "1.0.0",
"description": "yb site build",
"main": "src/js/main.js",
"dependencies": {},
"devDependencies": {
"grunt": "^1.0.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-sass": "^3.0.2",
"node-sass": "^4.10.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Scott",
"license": "ISC"
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
build: {
files: [{
src: 'src/sass/test.scss',
dest: 'assets/css/test.css'
}]
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
};
The grunt-sass docs give a different configuration (which I've also tried), but I still can't get it to compile.
As far as I know, everything is installed. I can't find where I'm going off the rails here. Any thoughts?
check ruby with ruby -v (install [ruby][1] )
Install Sass with sudo gem install sass (install [sass][2] )
setting for Grunt Tasks & run grunt convert-sass
// Load Grunt
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Tasks
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
dist: {
options: {
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'src/sass',
src: ['**/*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
}
});
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
grunt.registerTask('convert-sass', 'sass');
};
I am trying to watch an entire folder for sass changes..
The directory is follows:
creatives/lp/folder/style.scss
creatives/lp/folder1/style.scss
And here is my grunt file
sass: {
dist: {
files: {
'creatives/lp/**/test.css' : 'creatives/lp/**/test.scss'
},
options: {
style: 'compressed',
},
}
},
Grunt is able to see sass changes but writes out the compiled CSS to:
creatives/lp/**/style.css
The CSS should be saved in the same folder as the source SCSS file...
your question is not so clear for me
- if you want multiple files to compile to one file with grunt you can make the files as array format
dist: {
files: [{
src: ['creatives/lp/folder/*.scss'],
dest: 'creatives/lp/folder/style.css',
}]
}
If you want the css file should be created in the same folder as scss file, you can use the following snippet.
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
expand: true,
cwd: 'creatives',
src: ['**/*.scss'],
dest:'creatives',
ext:'.css'
}]
}
}
I hope it solves your problem.
I'm using generator-zf5 to generate my Yeoman app. When installing I said Yes to including Compass in my project, but I can't see the Compass files in my project files. Am I doing something wrong. Do I need to include this myself. If so, how?
I uninstalled all Sass gems and Compass and reinstalled with gem install compass --version 0.12.7 and am now using Compass 0.12.7 and Sass 3.2.19 (Media Mark).
I then installed Compass locally using:
npm install grunt-contrib-compass --save-dev
But when I add #include border-radius(25px); to my CSS, I keep getting an error. Can anyone help me? I'm still trying to rap my head around a lot of these terminal processes.
Thanks in advance!
it is resolved now in the generator-zf5 github issue tracker: https://github.com/juliancwirko/generator-zf5/issues/26
Have you added the require option in your gruntfile?
See:
http://ericdfields.com/post/installing-compass-frameworks-in-a-yeoman-project
Make sure you have the proper 'watch' block in your initConfig:
grunt.initConfig({
// Project settings
yeoman: appConfig,
// Watches files for changes and runs tasks based on the changed files
watch: {
...
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
}, ...
And also the compass definition below the watch:
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
And lastly, the concurrent tasks definition:
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'imagemin',
'svgmin'
]
},
I'm using grunt.js for the first time and I'm having trouble setting up a sass watch. I've successfully installed node.js and grunt and I was able to get it concatinating and minifying all my javascript files into one file. Then I moved onto trying to get it to watch and compile my sass files and I can't figure out why I keep getting this error in my command line (clearly there is a syntax error, but I don't know where it is?
here is my command line error:
Mandy at MandysMac in ~/Desktop/Dropbox/WEBSITES/Portfolio/wp-content/themes/mandy_made_this_theme on master*
$ grunt
/Users/Mandy/Desktop/Dropbox/WEBSITES/Portfolio/wp-content/themes/mandy_made_this_theme/Gruntfile.js:27
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Here is my package.json file:
{
"name": "mandy-made-this-theme",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-sass": "^0.7.3",
"grunt-contrib-watch": "^0.6.1"
}
}
And most importantly, Here is my grunt file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: ['working/jquery-2.1.0.min.js, working/jquery-ui-1.10.4.custom.min.js', 'working/jquery.smooth-scroll.min.js', 'working/isotope.pkgd.min.js', 'working/scripts.js'], //input
dest: 'scripts/build/scripts.min.js' //output
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
options: {
livereload: true,
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default',['uglify', 'sass', 'watch']);
}
You are missing a comma after sass object
'style.css': 'sass/style.scss'
}
}
}, // added , here
watch: {
css: {
files: '**/*.scss',