Using grunt for a custom Project - javascript

I am using Grunt as "JS Task Runner".
Node is installed in "C:/Program Files".
NPM got installed in C:/users/Peterson/appdata/roaming/npm.
Grunt, Bower, and Grunt-cli inside npm folder.
Creating a project - D:/Project A.
Following files inside D:/ProjectA - "package.json" and gruntfile.js
package.json
{
"name": "Test-Project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
basePath: '../',
srcPath: '../src/',
deployPath: '../deploy/'
},
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',
// Task configuration.
concat: {
options: {
stripBanners: true
},
dist: {
src: ['<%= meta.srcPath %>scripts/fileone.js', '<%= meta.srcPath %>scripts/filetwo.js'],
dest: '<%= meta.deployPath %>scripts/app.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task
grunt.registerTask('default', ['concat']);
};
In CLI D:/ProjectA> grunt
Fatal Error: Unable to find local grunt
Can someone help?

You have installed node/npm and the clis of Grunt & Bower (installing them globally via npm install -g I assume)
What you're missing is to run npm install at the root of your project (where your package.json file is), to install your project dependencies specified in the package.json

Related

Less task not found error

I recently started using grunt and can't seem to get it working: I installed grunt-cli using npm and also installed a few grunt modules using npm with no issues. I'm trying to compile all the bootstrap framework's less files into one css file but keep getting an error saying the less task was not found. i'm sure everything is where it's supposed to be and I loaded the grunt-contrib-less plugin in the gruntfile. Any idea where I might be going wrong?
My package.json's contents:
{
"name": "dConference",
"version": "0.1.0",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-jshint": "latest",
"jshint-stylish": "latest",
"grunt-contrib-uglify": "latest",
"grunt-contrib-less": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-watch": "latest"
}
}
And my gruntfile.js's contents:
//gruntfile specifying all tasks to be performed
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//all configuration goes here
less: {
build: {
files: [{
expand: true,
cwd: "components/less",
src: ["*.less"]
dest: "css/main.css"
} ]
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
I made Gruntfile.js as following.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
build: {
files: {
'css/main.css': 'components/less/bootstrap.less'
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
And running "grunt less" on project root folder was successful.
After successful running of "grunt less" command, main.css was generated under css folder.
Project structure is:
grunt-test-project
components/less
mixins folder
all other bootstrap less files
css
Gruntfile.js
package.json
Please try it on your side and let me know the result.

Grunt imagemin error: Cannot read property 'contents' of undefined

Grunt imagemin throws the following error when I try to run it:
Running "imagemin:dynamic" (imagemin) task
Fatal error: Cannot read property 'contents' of undefined
Here's my package.json file:
{
"name": "project1",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-uglify": "^0.11.0",
"imagemin" : "4.0.0"
}
}
And here's my Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'views/js/src/main.js',
dest: 'views/js/build/main.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'views/images/src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'views/images/build/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['uglify', 'imagemin']);
};
The issue was flagged and evidently resolved in a prior version of imagemin. But the agreed upon solution was to update grunt-contrib-imagemin to version 1.0.0 and imagemin to 4.0.0, which I've done and it still isn't working.
Just update the gurnt-contrib-imagemin to 1.0.0 or latest, you may be having older version probably 0.9.x
The GitHub solution (https://github.com/gruntjs/grunt-contrib-imagemin/issues/344), instead of downgrading grunt-contrib-imagemin, is adding "vinyl-fs": "2.2.1" in your package.json.
vinyl-fs seems to be anywhere in the dependency tree. But there was a breaking version change of vinyl-fs from 2.2.1 to 2.3.0, which will brake the build process. So the version should be "forced" to 2.2.1.
I resolved the issue by changing my grunt-contrib-imagemin in my package.json to grunt-contrib-imagemin": "0.9.1"
For me worked updating grunt-contrib-imagemin to version ^1.0.0 and adding dependencies imagemin version ^4.0.0 and vinyl-fs version ^2.1.1

Grunt Warning: Task "concat" not found

I'm trying to get started with a simple Grunt example, but I'm running into an issue with grunt-contrib-concat.
Here's my Gruntfile.js:
$ cat Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
and my package.json:
$ cat package.json
{
"name": "Linker",
"version": "0.0.0",
"description": "A test project that is meant to be a dependency",
"repository": {
"type": "git",
"url": "git://github.com/jonbri/Linker.git"
},
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"grunt-contrib-concat": "*"
},
"author": "",
"license": "ISC"
}
Running npm install doesn't show any obvious errors:
$ npm install
$ ls node_modules/
grunt grunt-contrib-concat
Here is what my directory structure looks like:
$ ls
Gruntfile.js node_modules package.json README.md src
$ ls src
index.js
When I run grunt concat I get this:
$ grunt concat
Loading "concat.js" tasks...ERROR
>> Error: Cannot find module 'ansi-styles'
Warning: Task "concat" not found. Use --force to continue.
Aborted due to warnings.
My setup:
Lubuntu 12.10, node: v0.10.25, npm: 1.4.21, grunt-cli: v0.1.13, grunt: v0.4.5
Am I missing something?
You should run it as: grunt without concat as the task is the default one. No arguments are needed to run it. So the command to launch becomes simply:
grunt
Use this to install grunt-contrib-concat:
npm install grunt-contrib-concat --save-dev
Package.json should have something like this:
"devDependencies": {
"grunt-contrib-concat": "^0.5.1"
},

Gruntfile.js tasks... ERROR

Trying to get Grunt to concat my CSS files into one called production.css
Here is the output from the command prompt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>
Here is my Gruntfile
{
"name": "AjaxPmodule.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
};roject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
I'm using the grunt-contrib-concat to concat my files. The version is "^0.5.0"
You have for some reason gotten some extra text into your file. It should start with module.exports and you also have something extra in the end.
I think what you did was basically to paste your grunt code into a code snippet that looks like package.json:
{
"name": "ajaxProject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
Try this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
}

Setting jshint and travis-ci for javascript project

I'm trying to setup Travis CI on one JavaScript project hosted on GitHub but I'm getting error like
Loading "jshint.js" tasks...ERROR
>> Error: Cannot find module 'jshint/src/cli/cli'
Those are my files:
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
myFiles: ['cyrlatconverter-v0.5.4.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
.travis.yml
language: node_js
node_js:
- 0.10
package.json
{
"name": "node-travis",
"version": "0.1.0",
"devDependencies": {
"grunt": "0.4.1",
"grunt-cli": "0.1.9",
"grunt-contrib-jshint": "0.6.0"
},
"scripts": {
"test": "grunt --verbose"
}
}
Upgrading versions as discussed in github.com/gruntjs/grunt-contrib-jshint/issues/92 solved the problem.
Also as #Dexa pointed out, for him - removal of scripts part of the package.json worked and adding following to the Gruntfile.js :
grunt.registerTask('default', ['jshint']);
For clarification, ^ above registers default grunt task to run jshint when grunt is wrote to command line.

Categories