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
Related
so I am trying to get grunt working ( ive installed the relevant elements ) I'm not sure what settings i have wrong as, this is what comes up in the terminal after 'grunt watch'
$ grunt watch
Running "watch" task
Waiting...
it won't do anything until i hit save. then it will say a change has taken place.
i dont think this is how it's supposed to work.
my gruntfile is:
// Use "grunt --help" to list the available tasks
module.exports = function(grunt) {
grunt.initConfig({
sass: {
// this is the "dev" Sass config used with "grunt watch" command
dev: {
options: {
style: 'expanded',
},
files: {
// the first path is the output and the second is the input
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
},
// this is the "production" Sass config used with the "grunt default" command
dist: {
options: {
style: 'compressed',
},
files: {
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
}
},
// configure the "grunt watch" task
watch: {
sass: {
files: ['sass/*.scss', 'sass/**/*.scss',],
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// "grunt" is the same as running "grunt sass:dist".
grunt.registerTask('default', ['sass:dist']);
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('default', ['watch',]);
};
can anyone pls help?
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.
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.
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).
I have a linux symlink to a folder called node_modules in my folder with the grunt file but when I run grunt I get this:
Local Npm module "jshint-stylish" not found. Is it installed?
All my other npm modules work fine,any ideas?
my grunt file:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('jshint-stylish');
permissions:
me#pc:~/dev/root/node_modules$ ls -l
total 96
..
drwxr-xr-x 3 me me 4096 Jun 10 14:57 grunt-shell
drwxr-xr-x 3 me me 4096 Jun 10 15:00 jshint-stylish
..
EDIT_____________________
I'm using it in grunt as a reporter:
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
Try installing the module manually.
npm install jshint-stylish
worked for me.
The load-grunt-configs owner creynders suggests here that the error
"Local Npm module 'jshint-stylish' not found. Is it installed?"
is apparently caused by the requiring of jshint-stylish in the jshint.js config file.
It can't find the jshint-stylish module since it's in a directory outside the project.
However I was unable to make his suggestion working for me, but I found my own way:
// gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
config: grunt.file.readJSON('grunt-config.json'),
jshint_reporter: require('jshint-stylish')
});
// grunt-config.json
{
"jsHintFiles" : [
"**/modules/*.js"
]
}
// jshint.js
module.exports = function(grunt) {
"use strict";
grunt.config.merge({"jshint": {
"default": {
options: {
reporter: "<%= jshint_reporter %>"
},
src: ["<%= config.jsHintFiles %>"]
}
}});
};
Check that your NODE_PATH environment variable references your node_modules directory.
Locally it will be:
export NODE_PATH=./node_modules