Sorry, I'm newbie in npm-bower-grunt services. Maybe this question is stupid, but I can't find solution in google.
So, I have installed single page app based on npm/bower/grunt/angular.js
In the root I have gruntfile.js with this code
module.exports = function(grunt) {
var gtx = require('gruntfile-gtx').wrap(grunt);
gtx.loadAuto();
var gruntConfig = require('./grunt');
gruntConfig.package = require('./package.json');
gtx.config(gruntConfig);
// We need our bower components in order to develop
gtx.alias('build:standardversion', [
'compass:standardversion',
...
]);
gtx.finalise();
};
Else I have file grunt/compass.js with:
module.exports = {
standardversion: {
options: {
config: 'STANDARD/master/config.rb'
}
}
};
Then in bower_components folder I have gruntfiles for each plugin with code something like:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
...
},
uglify: {
...
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', [
'karma',
'uglify'
]);
};
So now I have to install css-flip plugin from here https://www.npmjs.com/package/grunt-css-flip
I installed it with npm and now I don't know where to write a task for this.
Am I need to create new file in bower_components or somewhere else?
Please tell me or give me a link to understand it properly
Thanx
Related
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 have both files: app.js which starts the http server, and main.js which is compiled by browserify and used in html as
So I have a Grunt configured with forever, browserify and watch.
I want that on app.js chance, the http must be restarted (via forever:restart), and when main.js changes, the build must be browserified (via browserify)
so, when i run grunt, says forever:start does not exist, any help ?
$ grunt
Warning: Task "forever:server1:start" not found. Use --force to continue.
this is my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'examples/public/js/module.js': ['examples/main.js']
}
}
},
forever: {
server1: {
options: {
index: 'examples/app.js',
logDir: 'examples/logs'
}
}
},
watch: {
app: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['forever:server1:start']
},
web: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['browserify']
},
}
});
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['browserify', 'forever:server1:start']);
grunt.registerTask('restart', ['browserify', 'forever:server1:restart']);
};
The task isn't found because you're missing grunt.loadNpmTasks('grunt-forever'). You might also find more success using something like nodemon instead of grunt.
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'
]);
};
I've just set up Grunt for my project and I'm trying to run min task but I get the error:
Task 'min' not found
Here is my gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: "calculator/add.js",
dest: "add.min.js"
}
}
});
};
What could be wrong here? Thanks!
You need to load the npm module containing the task in to grunt. Update your Gruntfile so it looks like the example below.
Please note, that you need to have the correct name for the npm module to be loaded in. Although the grunt task may be called min, this is probably not the case for the npm module. I referenced grunt-example-min in the example file below, so be sure to update this to the correct name.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: "calculator/add.js",
dest: "add.min.js"
}
}
});
grunt.loadNpmTasks('grunt-example-min');
grunt.registerTask('default',['min']);
};
Just Getting started with grunt, and when I run grunt I get this error
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: grunt is not defined
This is my Gruntfile.js
module.exports = function(grunt){
'use strict';
};
I had it suddenly happen to me,
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'style.css': 'style.scss'
},
options: {
includePaths: ['css/'],
outputStyle: 'nested'
}
}
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('sass', ['sass']);
};
Make sure the loadNpmTasks and registerTask commands are inside the module.export, if they're outside of the scope of that closure grunt won't be defined, so it fails
Not entirely sure why, but this resolved that issue:
'use strict';
module.exports = function(grunt){
};
I too saw many "grunt not defined" error messages on my terminal.
I grabbed another gruntfile.js from the same directory where I had Node and NPM installed, and replaced the boilerplate gruntfile.js with the other gruntfile.js.
Now, I call Grunt and it works.
I had trailing commas in my gruntfile code which was throwing that error. Thank you ReSharper. Hope this helps someone.
pkg: grunt.file.readJSON('package.json'),
ngAnnotate: {
options: {
singleQuotes: true
},
FFApp: {
files: {
'Scripts/Angular-Annotated/Annotated.js': ['Scripts/Angular/**/*js']
}
, (< deleted this)
}
,(< and this one)
},