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']
}
}
Related
I have a simple Gruntfile configured to run sass, then autoprefix (postcss), and finally cssmin. It's supposed to run the tasks in that order after detecting a change in a scss file and the consequent changes (after running sass) in the resulting css file. However, it is only running the sass task. Here is my gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'dev/scss/**/*.scss',
tasks: ['sass']
},
autoprefix: {
files: 'dist/css/main.css',
tasks: ['postcss']
},
cssmin: {
files: 'dist/css/main-prefixed.css',
tasks: ['cssmin']
},
js_concat: {
files: 'dev/scripts/**/*.js',
tasks: ['concat']
},
js_uglify: {
files: 'dist/scripts/built.js',
tasks: ['uglify']
}
},
sass: {
dev: {
files: {
'dist/css/main.css' : 'dev/scss/main.scss'
}
}
},
cssmin: {
build: {
src: 'dist/css/main-prefixed.css',
dest: 'dist/css/main.min.css'
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: ['last 2 versions']})
]
},
dist: {
src: 'dist/css/main.css',
dest: 'dist/css/main-prefixed.css'
}
},
concat: {
options: {
separator: '\n\n\n'
},
dist: {
src: ['dev/scripts/*.js'],
dest: 'dist/scripts/built.js'
}
},
uglify: {
build: {
files: {
'dist/scripts/built.min.js': ['dist/scripts/built.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
And this is the file structure:
Gruntfile.js
dev/
|__ scss/
|__ (all scss partials and main.scss file)
dist/
|__ css/
|__ main.css
|__ main-prefixed.css
|__ main.min.css
When I run the tasks manually it works without problem.
What might be the issue here?
No sure why you're getting these results, but you can try to solve it by configuring your watch task a bit different. If you detect a change in your scss files, just run the chain of commands one after the other (instead of relying on watch to see the resulted change of each task and act):
watch: {
sass: {
files: 'dev/scss/**/*.scss',
tasks: ['sass', 'postcss', 'cssmin'] // This will run the 3 tasks one after the other.
},
js_concat: {
files: 'dev/scripts/**/*.js',
tasks: ['concat']
},
js_uglify: {
files: 'dist/scripts/built.js',
tasks: ['uglify']
}
},
I have been trying this for sometime now. Each time I run grunt in my Terminal I get the following error:
User$: grunt
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
This is my GruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
js: {
files: ['js/*.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch', 'concat']);
};
My basic directory:
/js/jquery.js
/js/angular.js
/js/js.js
/css/settings.scss
/css/slider.scss
/css/css.css
You're missing a comma after your watch:css target (line 23).
Also, please note that the watch task never exits, so you want your default task to run it last:
grunt.registerTask('default', ['concat', 'watch']);
And finally, you should exclude your concatenated js from the list of watched files, to avoid looping.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js', '!js/js.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: 'css/*.scss',
tasks: ['sass']
},
js: {
files: ['js/*.js', '!js/js.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'watch']);
};
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.
Grunt doesn't concat and uglify my javascript files when these files are changed and changes are watched for.
If I run grunt concat the js files are concatenated as expected.
If I then run grunt uglify the files are uglified as expected.
However when I simply run grunt the watch task starts and I change a javascript file I get this:
$ grunt
Running "watch" task
Waiting...
>> File "src/js/test.js" changed.
Running "uglify:my_target" (uglify) task
>> Destination dest/js/app.min.js not written because src files were empty.
>> No files created.
Why does it work when I run individual commands but not when changes to the files are being watched for?
Here's my grunt file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
my_target: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
js: {
files: 'src/js/*.js', tasks: [ 'uglify' ]
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};
I fixed this by changing the watch section. I also changed my_target to build.
My whole grunt file looks like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: "\n\n\n",
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
build: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
scripts: {
files: ['<%= concat.dist.dest %>'],
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};
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.