Hello I'm trying to create a documentation for my ionicframework/angularjs application via grunt and ngdoc.
I've installed everything like preferred in http://gruntjs.com/getting-started
Well if I now run grunt
I get:
Running "jshint:gruntfile" (jshint) task
>> 1 file lint free.
Running "jshint:lib_test" (jshint) task
>> 0 files linted. Please check your ignored files.
Running "qunit:files" (qunit) task
Warning: 0/0 assertions ran (0ms) Use --force to continue.
Aborted due to warnings.
And with that I can't show the docs.
My gruntfile is looking like this:
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['lib/**/*.js', 'test/**/*.js']
}
},
qunit: {
files: ['test/**/*.html']
},
ngdocs: {
all: ['src/resources/js/*.js']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test', 'qunit']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ngdocs');
// Default task.
grunt.registerTask('default', ['jshint', 'qunit']);
grunt.registerTask('build','Build the application',['ngdocs']);
};
I'm new in creating docs for angularjs so what is the best practice for that purpose?
When you just use 'grunt' from the command line, it will attempt to run every task in the Gruntfile.js.
You want to just run ngdocs, so you should use grunt ngdocs as the command line command.
You've also added a task called 'build', which just runs ngdocs, so you can also use: grunt build
Related
I'm new in using Grunt tool, I was doing the steps like the video said, but i faced some errors and started from the whole beginning again, but now i'm facing this issue, when i type the command "grunt" in the CMD in the directory of the project folder i get everything good, but there is no JavaScript file created in the distribution folder directory "dist/scripts", and even the Uglify is not generated.
In the video after the instructor typed the command grunt a JS file created in dist/scripts directory with name "main.6c5adb2140e008f7bb85.js", and css file created in dist/styles directory with name "main.d1901e133950f2e3aeae.css", and also in his terminal it was written replaced 1 reference to assets and Uglify generated like in the picture:
Instead i get replaced 0 references to assets and the uglify is not generated:
I did all the installation command that in the video by order, and i created all the files (package.json, Gruntfile.js, app.js, .jshintrc)
after that i added the usemin to the require jit-grunt
and added it to the registerTask. Here's the Gruntfile.js source code:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
},
useminPrepare: {
html: 'app/menu.html',
options: {
dest: 'dist'
}
},
// Concat
concat: {
options: {
separator: ';'
},
// dist configuration is provided by useminPrepare
dist: {}
},
// Uglify
uglify: {
// dist configuration is provided by useminPrepare
dist: {}
},
cssmin: {
dist: {}
},
// Filerev
filerev:{
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 20
},
release: {
// filerev: release hashes(md5) all assets (images, js and css)
// in dist directory
files: [{
src: [
'dist/scripts/*.js',
'dist/styles/*.css',
]
}]
}
},
// Usemin
// Replace all assets with their revved version in html and css files.
// options.assetDirs contains the directories for finding the assets
// according to their relative paths
usemin: {
html: ['dist/*.html'],
css: ['dist/styles/*.css'],
options: {
assetsDirs: ['dist', 'dist/styles']
}
},
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'copy',
'filerev',
'usemin'
]);
grunt.registerTask('default',['build']);
};
Need help please !!
it's look like there is no mistake in the commands that 've wrote but the mistake here is the name of the html in my project folder is not the same name which is "menu.html" and i wrote it in Gruntfile "meun.html" that's why it doesn't create the js & css file !!
I have generated a angular app with yeoman and now trying to minify my html files with grunt + htmlmin. The htmlmin bit looks like this:
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
When I run this task then it responds that it has minified 2 files but I cant see them in the dist folder? There is no view folder created at all?
I don't use yeoman, but I do use Gruntjs.
Assuming it's not a yeoman config issue, you can do something similar to what I do. Here is the gist...
First I have a development process I've created that does not uglify, minify, or anything else... this helps speed up my dev process.
Then when I'm ready to publish I run it through a publish process that includes uglify, concats, minify, imagemin, etc...
You really only need to minify the html from the build (output) directory... and since you're publishing you might as well just overwrite the HTML files in the build directory with the htmlmin versions (there is really no sense in having both versions for publishing).
Here is my task to do that... for this case let's assume your output directory is named "_build". It's actually a very easy and clean task. Hope this helps...
htmlmin: {
site: {
options: {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: false,
removeCommentsFromCDATA: false,
removeRedundantAttributes: false,
collapseBooleanAttributes: false
},
expand: true,
src: './_build/**/*.html',
}
}
You can't htmlmin something that doesn't exist yet. You have to build the output directory first and then run htmlmin on those files... I think your src will be more like the following as well...
files: [{
expand: true,
src: '<%= yeoman.dist %>/**/*.html'
}]
If this works for you, then please vote-up my answer and mark it as the correct answer.
With Yeoman, change your grunt file in both the 'htmlmin" and "copy" sections. This will allow for minification, more than one sub directory down.
Change this line:
src: ['*.html', 'views/{,*/}*.html'],
to this:
src: ['*.html', 'views/**/*.html'],
*Just be sure to change it in the 'htmlmin" and correspondingly in the "copy" section of your same grunt file.
I am using grunt,bower and yeoman for my angularjs web applicaiton. My UI code is ready for deployment. I want to create a .WAR file for deployment.
I installed "grunt-war" dependency using bower and I configured following code in my registerGruntTask.js file
grunt.loadNpmTasks('grunt-war');
grunt.initConfig({
/*
* Build a WAR (web archive) without Maven or the JVM installed.
*/
war: {
target: {
options: {
war_dist_folder: '<%= target %>',
war_name: 'sm-ui',
webxml_welcome: 'index.html',
webxml_display_name: 'sm-ui',
webxml_mime_mapping: [
{
extension: 'woff',
mime_type: 'application/font-woff'
} ]
},
files: [
{
expand: true,
cwd: '<%= target %>',
src: ['**'],
dest: ''
}
]
}
}
});
Then, I entered "grunt build" and "grunt war" in my command line. But, Nothing is creating. Please help me out.
Backend of our app is in PHP and for frontend we are using AngularJs.
We successfully managed to run e2e tests on local as well as on production server using protractor.
After writing loads of e2e tests for our app, we started looking for its coverage similar to that of unit testing. After searching for lot, luckily we find https://www.npmjs.com/package/grunt-protractor-coverage , exactly what we wanted.
I took help from http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ article which beautifully helps in setting up everything. I setup the config and other grunt tasks for my app, and finally our code(js files) were properly instrumented. I copied the rest of the files(html, static, etc.) to that instrumented code and provided the correct path for the proractor-config file. Tests started running as they were running before, but this time with instrumented files.
Till this point, everything is OK. But when the task for generating coverage-report was executed, we figured that we had empty coverage.json file {}. This means the report will surely be empty as it reads that file to generate report, and as far as I have figured out, this file is generated by protractor-coverage grunt task while tests are executing. It sends the information to the collector(port: 3001) using a POST req and while generating report, a GET req is being made to the same collector.
So, what I figured is, No POST req is being made to collector.
var options = {
hostname: 'localhost',
port: <%=collectorPort%>,
path: '/data',
method: 'POST',
headers:{
'Content-Type':'application/json'
}
};
function saveCoverage(data){
var req = http.request(options, function(res) {
res.on('data', function (chunk) {
});
});
req.on('error', function(e) {
console.log('problem with request: ' + e.message);
});
// write data to request body
req.write(JSON.stringify(data));
req.write('\n');
req.end();
}
Each time it just shows
where it should have listed down every file:
And also, that 100 everywhere is misleading, I ran tests for the source code: http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ as explained, but even if there's only one e2e test, the report must have given the actual numbers instead of giving a straight 100 for all.
It might happen that I have some wrong configuration or missed something.
Below are my files:
'use strict';
module.exports = function(grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: 'app',
dist: 'dist-test',
e2e: 'coverage/e2e',
instrumentedServer: 'coverage/server/instrument',
instrumentedE2E: 'coverage/e2e/instrumented'
},
// Empties folders to start fresh
clean: {
coverageE2E: {
src: ['<%= yeoman.e2e %>/'],
}
},
// Copies remaining files to places other tasks can use
copy: {
coverageE2E: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.e2e %>/instrumented/app',
src: [
'**/*',
'!modules/**/*.js',
'!editor/**/*.js'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.e2e %>/instrumented/app/images',
src: ['generated/*']
}, ]
},
},
// start - code coverage settings
instrument: {
files: ['app/modules/**/*.js', 'app/editor/**/*.js'],
options: {
lazy: true,
basePath: 'coverage/e2e/instrumented/'
}
},
makeReport: {
src: '<%= yeoman.instrumentedE2E %>/*.json',
options: {
type: 'html',
dir: '<%= yeoman.e2e %>/reports',
print: 'detail',
// type: 'lcov'
// dir: 'reports'
}
},
protractor_coverage: {
options: {
configFile: 'test/e2e/protractor-config.js', // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
coverageDir: '<%= yeoman.instrumentedE2E %>',
args: {},
run: {}
},
chrome: {
options: {
args: {
baseUrl: 'https://localapp.vwo.com/v3/#/',
// Arguments passed to the command
'browser': 'chrome'
}
}
}
}
});
grunt.registerTask('default', [
'clean:coverageE2E',
'copy:coverageE2E',
'instrument',
'protractor_coverage:chrome',
'makeReport'
]);
};
And my coverage.json file:
{}
I am having a backbone project in yeoman and below is my grunt file configuration
module.exports = function( grunt ) {
'use strict';
//
// Grunt configuration:
//
// https://github.com/cowboy/grunt/blob/master/docs/getting_started.md
//
grunt.initConfig({
// Project configuration
// ---------------------
// specify an alternate install location for Bower
bower: {
dir: 'app/scripts/vendor'
},
// Coffee to JS compilation
coffee: {
dist: {
src: 'app/scripts/**/*.coffee',
dest: 'app/scripts'
}
},
// compile .scss/.sass to .css using Compass
compass: {
dist: {
// http://compass-style.org/help/tutorials/configuration-reference/#configuration-properties
require: ['susy'],
options: {
css_dir: 'temp/styles',
sass_dir: 'app/styles',
images_dir: 'app/images',
javascripts_dir: 'temp/scripts',
force: true
}
}
},
// generate application cache manifest
manifest:{
dest: ''
},
// headless testing through PhantomJS
mocha: {
all: ['test/**/*.html']
},
// default watch configuration
watch: {
coffee: {
files: '<config:coffee.dist.src>',
tasks: 'coffee reload'
},
compass: {
files: [
'app/styles/**/*.{scss,sass}'
],
tasks: 'compass reload'
},
reload: {
files: [
'app/*.html',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
],
tasks: 'reload'
}
},
// default lint configuration, change this to match your setup:
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#lint-built-in-task
lint: {
files: [
'Gruntfile.js',
'app/scripts/**/*.js',
'spec/**/*.js'
]
},
// specifying JSHint options and globals
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#specifying-jshint-options-and-globals
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
jQuery: true
}
},
// Build configuration
// -------------------
// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',
mkdirs: {
staging: 'app/'
},
// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.
// concat css/**/*.css files, inline #import, output a single minified css
css: {
'styles/main.css': ['styles/**/*.css']
},
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css',
img: 'images/**'
},
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// update references in HTML/CSS to revved files
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},
// HTML minification
html: {
files: ['**/*.html']
},
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
dist: '<config:rev.img>'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name:'config',
}//,
// While Yeoman handles concat/min when using
// usemin blocks, you can still use them manually
//concat: {
//dist: ''
//},
//min: {
// dist: ''
// }
});
// Alias the `test` task to run the `mocha` task instead
grunt.registerTask('test', 'mocha');
};
I have tried to build this , even though build was a success i am not getting the bacbone models and views on the minified app-amd.js file
Can i get any pointers on this?
Try using the latest backbone generator with Yeoman 1.0beta. We have made lots of improvements to it.
If you are still facing the same issue, please raise a ticket on github.