I am trying to compile scss file to css using Grunt, but I fail for unknown reason.
Here is my Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'dependencies',
cleanup: true,
layout: 'byComponent'
}
}
},
sass: {
foundation: {
files: {
'a.css': 'a.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-bower-task');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('dependencies', ['bower:install']);
grunt.registerTask('assets', ['sass:foundation']);
};
I am getting the following error:
> grunt assets
Running "sass:foundation" (sass) task
Warning: spawn C:\Windows\system32\cmd.exe;C\MySQL\bin ENOENT Use --force to continue
Aborted due to warnings.
What am I doing wrong?
i resolved the issue, installing "grunt-contrib-sass": "^0.8.1" (that's a old version, but it's works for me)
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.8.1"
}
Related
Could anyone post some basic steps on how to get *.html files to compile to *.jade files on file change / save operation in Visual Studio?
I have installed nodetools, web essentials. Syntax highlighting seems to work, but creating a .jade file does nothing. I think there is a missing step somewhere.
Do I have to use something like grunt-contrib-jade with a task?
Visual Studio 2015: After fiddling around a lot the answer i have is as follows:
Install node
Install NodeTools for visual studio
Run: npm install jade (install jade)
Run: npm install -g grunt-cli (install grunt)
Run: npm install bower
Create the below package.json file
Package.json : as follows
{
"name": "myapp",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-jade": "0.15.0",
"grunt-contrib-watch": "0.6.1"
}
}
7) Create the following grunt.js file
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
data: {
debug: true,
timestamp: "<%= new Date().getTime() %>"
}
},
files: [{
expand: true,
src: '**/*.jade',
ext : '.html'
}]
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'Scripts/bootstrap.js',
dest: 'Scripts/build/bootstrap.min.js'
}
},
watch: {
jade: {
files: '**/*.jade',
tasks: ['jade:watch'],
options: {
spawn: false
}
}
}
});
grunt.event.on('watch', function (action, filepath) {
if (filepath.indexOf('.jade') === -1) return;
var file = {};
var destfile = filepath.replace('.jade', '.html');
file[destfile] = filepath
grunt.config('jade.watch.files', file);
});
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
Open Task Explorer and then make sure you add/bind the task "watch" to project open.
I have following gruntfile
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
},
src: ['index.html']
}
},
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
}
}
});
require("matchdep").filterDev("grunt-").forEach(grunt.loadNpmTasks);
grunt.registerTask('default', ['watch']);
};
And when i try running grunt in cmd it gives me this error
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
How do i fix this
Try adding the htmlhint task to the default:
grunt.registerTask('default', ['htmlhint', 'watch']);
Also make sure you have installed grunt-htmlhint and saved it to your package.json. matchdep uses it in the filterDev method you're using, so if its not saved, it won't get loaded.
npm install grunt-htmlhint --save-dev
Alternatively you could load the task manually using:
grunt.loadNpmTasks('grunt-htmlhint');
When I am using grunt command it is showing me following error:
$ grunt
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Execution Time (2015-02-07 18:05:42 UTC)
loading tasks 339ms ███████████████████████████████████████████████ 99%
Total 344ms
I already tried - npm install, npm update commands. It would be great if someone can help me with this. Thanks!
Addding Content of Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**', '!packages/contrib/**/*.js', '!packages/contrib/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css', '!packages/contrib/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/core_modules/module/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
grunt.hook.push('concurrent', 9999);
if (process.env.NODE_ENV === 'production') {
grunt.hook.push('cssmin', 100);
grunt.hook.push('uglify', 200);
} else {
grunt.hook.push('jshint', -200);
grunt.hook.push('csslint', 100);
}
//Default task.
grunt.registerTask('default', ['hook']);
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};
Try running:
$ npm install
After that, if you run it and the error still persists or if there's another one, then you probably have not installed ruby, compass or both :)
I had the same issue, the problem for me was in my package.json where I didn't actually install the NPM package needed and it was not automatically installed as previously thought. Try doing
npm install --save-dev load-grunt-tasks
If that doesn't work can you provide the package.json file as well so we can get a little more information.
I was having the same issue you were having, it seems as though the gruntfile is missing a required initialization step.
By changing this:
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
to this:
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-hook');
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
Adding the grunt.loadNpmTasks call, I'm able to get past that issue. The problem is, now I'm getting
Task "clean" not found. Use --force to continue.
Looking at the rest of the grunt file, i don't see a register task for clean. If I go to the mean.io docs, it looks like the build is failing. Perhaps this is part of why? I think I asked mean-cli for gulp version, that's probably why. I'll delete and take it from the top :)
I think the problem is related to where the npm dependencies are declared and the way Heroku handles them.
In few words, check if the npm packages are as dev dependencies and move them to the dependencies block, as suggested here: https://stackoverflow.com/a/20687098/532912.
I use Grunt for Node with a bunch of packages. For example jsHint, jsDoc, Browserify, Uglify ...
I run the Gruntfile with Watchify and Newer for automation. So far, so good.
The Gruntfile, which works totaly fine:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['my/js/files/*.js']
},
jsdoc : {
dist : {
src: ['my/js/files/*.js'],
options: {
destination: 'doc'
}
}
},
browserify: {
'public/js/files/script.js': ['my/js/files/*.js']
},
uglify: {
my_target: {
files: {
'public/js/files/script.js': ['public/js/files/script.js']
}
}
},
htmlmin: {
dist: {
files: {
'public/html/index.html': ['public/html/index.html']
}
}
},
cssmin: {
combine: {
files: {
'public/css/css.min.css': ['my/css/files/*.css']
}
}
},
watch: {
javascript: {
files: ['my/js/files/*.js'],
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
},
html: {
files: ['public/html/index.html'],
tasks: ['htmlmin']
},
css: {
files: ['public/css/*.css'],
tasks: ['cssmin']
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jsdoc');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
};
It works as far as I only use Newer for jsHint. But if I try the same with jsDoc or Uglify I get Error-Messages.
Example:
I try this ...
tasks: ['newer:jshint:all', 'newer:jsdoc:all', 'browserify', 'uglify']
instead of ...
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
I get Error-Messages:
Running "newer:jsdoc:all" (newer) task
Warning: Cannot read property 'files' of undefined Use --force to continue.
Aborted due to warnings.
Why does it work for jsHint but not for the rest? Has anybody an idea? Would much appreciate some Hints!
Kind regards
the target of your jshint task is all, so newer:jshint:all is correct.
your jsdoc target is dist, so you have to use this target: newer:jsdoc:dist
for you it is even easier, you only have one target per task (only your watch task has multiple targets) so you could only do it like this:
['newer:jshint', 'newer:jsdoc', 'browserify', 'uglify']
After inheriting a project, I've found the developer was using SCSS and Grunt to Minify his code. I'm new to both, but noticed I had to install grunt-cli locally. I've done so and need to make some edits to the style sheets, but am still working through how to get the scss to minify after making changes.
The structure of the grunt/scss area is:
_ (root folder)
_/css
_/grunt
_/img
_/inc
_/img
_/js
_/misc
_/sass
Inside _/grunt is:
gruntfile.js
npm-debug.log
package.json
Steveax helped me figure our that I was missing the local grunt setup:
npm install
I've found the SCSS files inside the _/scss folder and am comfortable editing them for the purposes of updating styles; however, after saving one I've noticed that they don't automatically update the minified css in the _/css folder, and am left looking through the files and documentation for a solution. I think an experienced eye will know what command I've missed.
Here is an example of an scss file, _/sass/common.scss, I'd like to be able to save and replace the css equivalent, _/css/common.css
EDIT: Per the help of Robert Levy (below), it seems I just need to run Grunt after making changes.
(x-See edit above) Do I simply run uglify from the _ directory?
uglify /sass/common.scss -o /css/common.css -p 1
Inside of package.json is:
{
"name": "exampletheme.com",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.3.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-imagemin": "^0.5.0",
"grunt-contrib-watch": "^0.6.0",
"grunt-contrib-compass": "^0.7.2",
"grunt-contrib-sass": "^0.7.3"
}
}
Inside of _/grunt/gruntfile.js is:
module.exports = function(grunt) {
// All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// Configuration for concatinating files goes here.
dist: {
src: [
'../js/libs/owl.carousel.js',
'../js/libs/jquery.actual.js',
'../js/libs/chosen.jquery.js',
'../js/libs/jquery.parallax.js',
'../js/src/common.js'
],
dest: '../js/pro/global.js',
},
},
uglify: {
build: {
src: '../js/pro/global.js',
dest: '../js/pro/global.min.js',
},
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '../img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: '../img/pro/'
}]
}
},
compass: {
dev: {
options: {
sassDir: '../sass',
cssDir: '../css',
fontsDir: '../fonts',
imagesDir: '../img/',
images: '../img/',
javascriptsDir: '../js/pro',
//environment: 'development',
outputStyle: 'compressed',
relativeAssets: false,
httpPath: '.',
}
},
},
watch: {
scripts: {
files: ['../js/**/**.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
images: {
files: ['../img/src/**.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
compass: {
files: ['../**/*.{scss,sass}'],
tasks: ['compass:dev'],
}
},
svgstore: {
defaults: {
options: {
prefix : 'icon-',
},
files: {
'../img/svg-defs.svg': ['../img/svg/*.svg']
}
}
},
});
// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');
// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);
};
just run grunt and it will invoke the default task which you can see in the last line of your gruntfile.js will in turn run concat, uglify, compass, svgstore, and watch.
compass is the one which is compiling the scss and minifying it.
the watch task is interesting because it tells grunt to continue running, keep an eye on your files, and recompile when things change.