use grunt to update package dependancy version numbers - gruntjs

I have two projects EasyUI and EasyUI-Layout. EasyUI-Layout depends on EasyUI. I have grunt files set up to build them and push them to github. Here are the abridged grunt files:
// easyui
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify:...,
bumpup: {
file: 'package.json'
},
shell: {
git: ...
},
watch: ...
});
grunt.registerTask('g', ['bumpup', 'browserify', 'shell:git']);
};
// easyui-layout
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify:...,
bumpup: {
file: 'package.json'
},
shell: {
git: ...,
npm: ...
},
watch: ..
});
grunt.registerTask('g', ['shell:npm', 'bumpup', 'browserify', 'shell:git']);
};
What I would like is that when I build and commit the EasyUI-Layout project, its package json is updated with the latest version number from EasyUI. At the moment, for example, the version number for EasyUI dependency in the package.json stays stuck on 0.0.0. Here is the abridged package.json file:
{
"name": "easyui-layout",
"version": "0.0.3",
"dependencies": {
"easyui": "0.0.0"
}
}
Say the EasyUI version number is 0.0.7, then the next time I build EasyUI-Layout with grunt I would like the package.json to be:
{
"name": "easyui-layout",
"version": "0.0.4",
"dependencies": {
"easyui": "0.0.7"
}
}
I assume this is possible with bump or bumpup? But a little experimentation has gotten me nowhere.

No, these types of things should be manually specified. You can use semver ranges though to have the package automatically install

Let me answer my own question. Since I'm publishing EasyUI to npmjs.org let's assume the latest version is up there. Here's the abridged grunt file for the EasyUI-Layout package:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
shell: {
npm: {
command: [
'npm install easyui#latest --save'
].join('&&')
}
}
});
This just forces npm to install the latest version of EasyUI and updates the package.json file.
Simple as that. No need for other grunt tasks, custom or otherwise, and nothing to do with semver.

Related

grunt-contrib-compass not work in npm

i had installed npm and grunt and then installed grunt-contrib-compass.
but when i run grunt. i have this error
Running “compass:dist” (compass) task
Warning: not found: compass Use –force to continue.
Aborted due to warnings
and this my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
You need to install the Compass Ruby gem, as detailed here. Basically you need to have installed Ruby, and then using that you can install the Compass gem and grunt-contrib-compass should work

how to create grunt file to minified my js files

I have no idea how to minified my JSfiles using grunt.I hope someone can help me how to create grunt file in order to minified my js files step by step.
First, run npm init to create a package.json.
npm init
Then, create a Gruntfile.js file:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'path/to/your/minified.js': ['src/script1.js', 'src/script2.js', 'src/script3.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
To minify your JS files I recommend grunt-uglify.
Here is the documentation, but I will share the installation step by step.
Install the plugin via npm:
npm install grunt-contrib-uglify --save-dev
Then, add this in your Gruntfile.js:
grunt.loadNpmTasks('grunt-contrib-uglify');
The basic configuration is like this:
grunt.initConfig({
uglify: {
my_target: {
files: {
'path/to/your/minified.js': ['src/script1.js', 'src/script2.js', 'src/script3.js']
}
}
}
});
Your minified.js file is the result of the minification of all your js files.
Hope it helps.

Grunt via atom won't work

I installed Atom editor and tried to run grunt task via plugin grunt-runner. But unsuccessfully. OS: windows 8.1
My steps were:
1) install node.js with npm
2) get grunt
npm install -g grunt-cli
3) install sass-plugin
npm install grunt-contrib-sass --save-dev
4) create package.json file contained
{
"name": "test-app",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-sass": "^0.9.2"
}
}
5) add Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'styles/main.css': 'styles/main.scss' // 'destination': 'source'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['sass']);
};
As a result on trying to launch grunt via Atom's grunt-runner plugin:
Grunt exited: code 1.
But if I execute it via terminal using "grunt"-command it works perfect
I haven't researched this issue completely but in my case it was some conflict between 'grunt-runner' and 'build' plugins for Atom.
Eventually, I just reinstall Atom without 'build' plugin and now it's works.
But I still have no idea why that conflict happened

GruntFile returns [object, Object]

I am using a foundation/jekyll boilerplate.
Whenever I run grunt, it only returns the following in my style.css
[object Object]
It should have processed the scss from the foundation files.
Here is the gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/style.css': 'scss/style.scss'
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
The only thing I had to do was npm install node-sass.
I ran grunt and the only code in my style.css was [object, Object]
edit: ran npm install grunt-sass,
css now compiles nicely.
It seems that there's an error with recent version of node-sass where in error situations node-sass pipes [object Object] instead of failing and showing a proper stacktrace.
Your Gruntfile worked fine for me in a reduced test case, so validate your scss files before running the task.
Also, update to the newest node-sass/grunt-sass with npm install node-sass -save-dev, as it doesn't seem to behave that way (but throws the proper error instead).

Task "concurrent:server" not found

I am trying to build a yeoman generator that uses the foundation-five gruntfile but the tasks are not found. Only the clean task is found.
Warning: Task "concurrent:server" not found. Use --force to continue
Related codes is here, how can I fix it?
I have run into similar issues when trying to 'reuse' a gruntfile.js. You may need to install the relevant grunt packages from npm - packages that grunt is relying upon, but have not actually been installed in your project. In this case, from your terminal, inside the project folder:
$ npm install grunt-concurrent
(https://www.npmjs.org/package/grunt-concurrent)
I was able to figure out how to apply the foundation 5 yeoman generator to my own. It took a little effort to figure out what files and other configurations were required. Apparently there is more to it than just trying to reuse a Gruntfile.js which does not surprise me since I am new to yeoman and grunt.
Here are some of the lines I added to my index.js
var spawn = require('child_process').spawn;
// setup the test-framework property, Gruntfile template will need this
this.testFramework = options['test-framework'] || 'mocha';
// for hooks to resolve on mocha by default
options['test-framework'] = this.testFramework;
// resolved to mocha by default (could be switched to jasmine for instance)
this.hookFor('test-framework', { as: 'app' });
skipMessage: options['skip-install-message']
var webappDir = 'src/main/webapp/html/';
this.template('_Gruntfile.js', webappDir + 'Gruntfile.js');
this.template('_package.json', webappDir + 'package.json');
this.copy('bowerrc', webappDir + '.bowerrc');
this.copy('_bower.json', webappDir + 'bower.json');
this.copy('jshintrc', webappDir + '.jshintrc');
this.copy('editorconfig', webappDir + '.editorconfig');
this.mkdir(webappDir + 'uat');
this.copy('_dalekjs-tests.js', webappDir + 'uat/dalekjs-tests.js');
this.indexFile = this.readFileAsString(path.join(this.sourceRoot(), 'index.html'));
this.indexFile = this.engine(this.indexFile, this);
this.directory('app', webappDir + 'app', true);
this.write(webappDir + 'app/index.html', this.indexFile);
Hopefully this is useful for someone coming along and trying to merge Foundation 5 yeoman generator code with their own generator.
First install all necessary grunt modules from the same folder where you have Gruntfile.js:
npm install grunt-concurrent grunt-nodemon --save-dev
Second, load this modules by defining in Gruntfile.js
...
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('default', [
'concurrent'
]);
Now you are ready to run the task:
grunt
Bellow you can see entire example of Gruntfile.js with watch, sass and nodemon that I have:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: {
app: ['app'],
assets: ['assets'],
scss: ['<%= project.assets %>/sass/css'],
css: ['<%= project.assets %>/public/css']
},
sass: {
dev: {
options: {
style: 'expanded',
compass: false,
loadPath: 'bower_components'
},
files: {
'<%= project.css %>/style.css': '<%= project.scss %>/style.scss'
}
}
},
watch: {
sass: {
files: '<%= project.scss %>/{,*/}*.{scss,sass}',
tasks: ['sass:dev']
},
},
// watch our node server for changes
nodemon: {
dev: {
script: 'server.js'
}
},
// run watch and nodemon at the same time
concurrent: {
options: {
logConcurrentOutput: true
},
tasks: ['nodemon', 'watch']
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('default', [
'concurrent'
]);
};

Resources