I am working on my website and I want to use Susy as well as Compass. I am using Grunt too. When I run my grunt task I get this error:
Denniss-MacBook-Pro:portfolio dennis$ grunt --trace
Running "compass:dev" (compass) task
Gem::LoadError on line ["1990"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/specification.rb: Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0)
Run with --trace to see the full backtrace
Warning: ↑ Use --force to continue.
Aborted due to warnings.
This is my Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true
},
css: {
files: ['_sass/*.{scss,sass}'],
tasks: ['compass:dev']
},
js: {
files: ['js/*.js'],
tasks: ['uglify']
}
},
compass: {
options: {
require: 'susy'
},
dev: {
options: {
sassDir: ['_sass'],
cssDir: ['css'],
environment: 'development',
}
},
production: {
options: {
sassDir: ['_sass'],
cssDir: ['css'],
outputStyle: 'compressed',
environment: 'production',
}
}
},
uglify: {
all: {
files: {
'js/main.min.js': [
'js/libs/*.js',
'js/src/*.js'
]
}
}
},
connect: {
port: 8000
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['compass:dev', 'uglify','connect', 'watch']);
grunt.registerTask('production', ['compass:production', 'uglify']);
}
I just don't know what to do, thanks in advance!
There is the problem with dependencies they are incompatible:
susy 2.0.0 depends on sass ~> 3.3.0
compass 0.12.3 depends on sass = 3.2.14
you can list all you gems by:
gem list
try to do this:
gem install compass --pre
This should work.
Related
I want grunt to compile sass every time grunt is executed if my Sass files haven't changed. Sometimes the watcher fails to detect if the compiled result is different from the existing CSS file, and the only way to force it to compile is by editing one of the Sass files.
Grunt file:
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/**/*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: false
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
grunt.registerTask('default', [
'browserSync',
'sass',
'watch',
]);
Simply register sass as a task to run when you type grunt.
If you do this and the sass files are still not giving you the results you want, then you need to revisit your sass task and make sure you're piping the files where you want them to go.
More cool options:
newer: When you run grunt you want sass to compile to CSS only if there is a difference between the new CSS and the old. In that case, try grunt-newer. Appending newer:taskyouwanttorun:option will work.
watch:sass: You want sass to compile during a watch based on something besides changing one of the sass files. Easy, just set up a watch task that looks for whatever file you want to modify, image/javascript/html/whatever and set the task as sass
I have a .sass-cache folder that is being auto generated. Trying to figure out how not to let it generate it at all. To be more clear, I don't want the .sass-cache folder.
I've tried several approaches but can't seem to keep it from generating.
Here's a couple approaches attempted:
noCache: false or true
config.rb file with: asset_cache_buster = :none
config.rb file with: cache = false
Here is what my watch is doing:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['assets/js/*.js'],
tasks: ['concat', 'uglify', 'copy', 'clean'],
options: {
spawn: false
}
},
scss: {
files: ['assets/scss/*.scss'],
tasks: ['compass', 'cssmin'],
}
},
then later on, here is what Compass is doing & a snippet of my tasks:
compass: {
development: {
options: {
config: './config.rb',
sassDir: 'assets/scss',
cssDir: 'assets/css'
}
}
},
clean:{
build: {
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('default', ['watch']);
grunt.registerTask(
'build',
'Compiles all the assets and copies the files to the build directory.',
['less', 'compass', 'cssmin', 'concat', 'uglify', 'copy', 'clean']
);
};
here is what I'm trying in my config.
if File.file?( './.nosasscache' )
asset_cache_buster = :none
cache = false # Uncomment to disable cache.
end
Setting cache = false in your config.rb should be enough. You could try disabling all caching:
asset_cache_buster = :none
cache = false
If that doesn't work you could always run a clean to remove the folder.(see link)
https://github.com/gruntjs/grunt-contrib-compass#clean
If you are running Sass from the command line, you can add the --no-cache flag:
sass --no-cache input.scss output.css
I'm trying to run a basic app with gruntjs. Everything works fine, but once I try to run my sass-related grunt task, I have this error:
$ grunt sass
Running "sass:dist" (sass) task
Warning: spawn ENOENT Use --force to continue.
I already have installed Ruby and Sass, and Nodejs.
This is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'css/main.css': 'css/main.scss'
}
}
},
watch: {
css: {
files: ['css/main.scss'],
tasks: ['sass']
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['sass']);
};
Ruby and Sass versions:
$ ruby -v
ruby 2.0.0p598 (2014-11-13) [x64-mingw32]
$ sass -v
Sass 3.4.9 (Selective Steve)
Ruby Path is already in my PATH variable.
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).
I have installed foundation 5 with bower. by compass watch there is no problem to compile foundation files but when i want to use grunt-sass plugin, i see this error:
Running "sass:development" (sass) task
Warning: C:\wamp\www\nik\myapp/scss/app.scss:2: error: file to import not found or unreadable: "foundation"
Use --force to continue.
Aborted due to warnings.
Line 2 of app.scss is #import "foundation".
And grunt-sass in my Gruntfile.js:
sass: {
development: {
options: {
outputStyle: 'nested'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
},
production: {
options: {
outputStyle: 'compressed'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
}
I also tested this solution but it had no affection.
Just adding --libsass for installing foundation in command line, will cause installing foundation that is compatible with grunt:
foundation new A_PROJECT_NAME --libsass
Subsequently in grunt (after installing grunt-sass) :
sass: {
development: {
options: {
outputStyle: 'nested',
// Adding foundation source files, so we can #import them.
includePaths: ['bower_components/foundation/scss']
},
files: {
'css/style.css': ['path/to/styles/app.scss']
}
}
}
Hint: you can import your own style.scss in app.scss last line.