Related
Simple App with Yeoman just testing to see if I can deploy... I have run:
npm install grunt-build-control --save-dev
npm install jit-grunt --save-dev
But I get an error from the terminal saying that the plug-in can't be found? I know there may be an answer in Static Mapping just not sure how to go about it.
Here is the error from the terminal:
$ grunt buildcontrol:pages
jit-grunt: Plugin for the "buildcontrol" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings
Warning: Task "buildcontrol:pages" failed. Use --force to continue.
Aborted due to warnings.
Execution Time (2015-12-08 20:00:17 UTC)
loading tasks 288ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 99%
Total 291ms
And here is my Gruntfile.js:
// Generated on 2015-12-08 using
// generator-webapp 1.1.0
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all subfolders, use:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
require('jit-grunt')(grunt);
var pkg = require('./package.json');
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required grunt tasks
// Configurable paths
var config = {
app: 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
babel: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['babel:dist']
},
babelTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['babel:test', 'test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass', 'postcss']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'postcss']
}
},
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
}
},
livereload: {
options: {
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*',
'.tmp/scripts/{,*/}*.js'
],
port: 9000,
server: {
baseDir: ['.tmp', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
test: {
options: {
port: 9001,
open: false,
logLevel: 'silent',
host: 'localhost',
server: {
baseDir: ['.tmp', './test', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
dist: {
options: {
background: false,
server: '<%= config.dist %>'
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
eslint: {
target: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= browserSync.test.options.host %>:<%= browserSync.test.options.port %>/index.html']
}
}
},
// Compiles ES6 with Babel
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/scripts',
src: '{,*/}*.js',
dest: '.tmp/scripts',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.js',
dest: '.tmp/spec',
ext: '.js'
}]
}
},
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true,
sourceMapContents: true,
includePaths: ['.']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
postcss: {
options: {
map: true,
processors: [
// Add vendor prefixed styles
require('autoprefixer')({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']
})
]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
wiredep: {
app: {
src: ['<%= config.app %>/index.html'],
exclude: ['bootstrap.js'],
ignorePath: /^(\.\.\/)*\.\./
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /^(\.\.\/)+/
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
// true would impact styles with attribute selectors
removeRedundantAttributes: false,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care
// of minification. These next options are pre-configured if you do not
// wish to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
dot: true,
cwd: '.',
src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*',
dest: '<%= config.dist %>'
}]
}
},
// Generates a custom Modernizr build that includes only the tests you
// reference in your app
modernizr: {
dist: {
devFile: 'bower_components/modernizr/modernizr.js',
outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js',
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'!<%= config.dist %>/scripts/vendor/*'
]
},
uglify: true
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'babel:dist',
'sass'
],
test: [
'babel'
],
dist: [
'babel',
'sass',
'imagemin',
'svgmin'
]
},
buildcontrol: {
options: {
dir: 'dist',
commit: true,
push: true,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
pages: {
options: {
remote: 'git#github.com:adamcweitzman/portfolio-blog.git',
branch: 'gh-pages'
}
},
heroku: {
options: {
remote: 'git#heroku.com:example-heroku-webapp-1988.git',
branch: 'master',
tag: pkg.version
}
},
local: {
options: {
remote: '../',
branch: 'build'
}
}
}
});
grunt.registerTask('serve', 'start the server and preview your app', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'browserSync:dist']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'postcss',
'browserSync:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'postcss'
]);
}
grunt.task.run([
'browserSync:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
'concat',
'cssmin',
'uglify',
'copy:dist',
'modernizr',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:eslint',
'test',
'build'
]);
};
I forgot to require 'grunt-build-control' in the Gruntfile.js:
grunt.loadNpmTasks('grunt-build-control');
Works fine now.
I have an issue when I try to create minified css with grunt-contrib-cssmin.
SourceMaponcssmin.js` is set as false and I can't find why I keep getting this error message.
What should I do with this ./source-map/source-map-generator" error?
Error message
Loading "cssmin.js" tasks...ERROR
>> Error: Cannot find module './source-map/source-map-generator'
Gruntfile.js
grunt.initConfig({
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
}, {
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'mw/css/',
ext: '.min.css'
}]
}
},
watch: {
cleancss: {
files: ['*.css', '!*.min.css'],
tasks: 'cssmin'
},
},
});
// Load the plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['watch']);
try to remove your node_modules folder and re-install your dependencies with npm install. And try to re-run your task
I am using Grunt and executing cmd "grunt build" to create a distribution folder containing an AngularJS app.
As a standalone my app is working fine. Once I create a distribution for the app the app starts to crash pretty quickly.
I am seeing in F12 Tools Console is:
10 $digest() iterations reached. Aborting!
I am suspicious of a file in my .tmp directory called vendor.js and a failure to minify, uglify and or concat this file correctly because of controller dependency injection variables mangling injected controller arguments like "$scope" to "a" for example, even though I am using ngAnnotate.
See I am using UglifyJs and calling ngAnnotate before Uglify and Concat but I cannot remove UglifyJs from useMinPrepare or I have other errors such as the scripts directory not even being created in my dist directory:
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
I am setting mangle = false in my GruntJs file but I am suspicious of useMinPrepare js: ['concat', 'uglifyjs'] changing the sequence of execution and running uglify before ngAnnotate can run when useMin is called, even though I call useMin after ngAnnotate.
I am new to Grunt and this app has been passed to me from another developer.
I found this article that doesn't exactly make sense to me and also isn't a code change that seems to apply to my Gruntfile.js but I thought maybe I was on to something:
https://github.com/DaftMonk/generator-angular-fullstack/issues/164
I have set the Uglify mangle option to false but it has not fixed my issue.
Here is my Gruntfile.js code:
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
grunt.loadNpmTasks('grunt-connect-proxy');
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist'
},
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bowerInstall']
},
js: {
files: ['<%= yeoman.app %>/scripts/**/*.js'],
// tasks: ['newer:jshint:all'],
options: {
livereload: true
}
},
html: {
files: ['**/*.html'],
options: {
livereload: true
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0',
//hostname: 'localhost',
livereload: 35729
},
proxies: [{
context: ['/api', '/images'],
host: '127.0.0.1',
port: 60878,
changeOrigin: true
}],
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function (connect, options) {
var middlewares = [];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Setup the proxy
middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
// setup push state
middlewares.push(require('grunt-connect-pushstate/lib/utils').pushState());
// Serve static files
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
return middlewares;
}
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>',
middleware: function (connect, options) {
var middlewares = [];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Setup the proxy
middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
// setup push state
middlewares.push(require('grunt-connect-pushstate/lib/utils').pushState());
// Serve static files
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
return middlewares;
}
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
],
test: {
options: {
jshintrc: 'test/.jshintrc'
},
src: ['test/spec/{,*/}*.js']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the app
bowerInstall: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/'
// ,exclude : ["bower_components/angular-snap/angular-snap.css"]
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: '<%= yeoman.app %>/bower_components/'
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated',
fontsDir: '<%= yeoman.dist %>/styles/fonts'
}
},
server: {
options: {
debugInfo: false
}
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
// ,'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
uglify: {
dist: {
options : {
report: 'min',
mangle : false
// compress: false,
// beautify : true
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles/fonts', '<%= yeoman.dist %>/images' ]
}
},
concat: {
options: {
separator: grunt.util.linefeed + ";" + grunt.util.linefeed
}
},
// The following *-min tasks produce minified files in the dist folder
// cssmin: {
// options: {
// root: '<%= yeoman.dist %>'
// }
// },
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'scripts/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// ngmin tries to make the code safe for minification automatically by
// using the Angular long form for dependency injection. It doesn't work on
// things like resolve or inject so those have to be done manually.
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},
ngtemplates: {
fctrs: {
cwd: "<%= yeoman.app %>",
src: ['scripts/**/*.html'],
dest: '.tmp/concat/scripts/templates.js'
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'styles/fonts/*',
'statics/**',
'test_data/**/*.json'
]
},
{
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
processhtml: {
options : {
commentMarker : "process"
},
dist: {
files: {
'<%= yeoman.dist %>/index.html':['<%= yeoman.dist %>/index.html']
}
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
}
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'configureProxies:server', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'bowerInstall',
'concurrent:server',
'autoprefixer',
'configureProxies:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve:' + target]);
});
grunt.registerTask('test', [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'bowerInstall',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'ngtemplates',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin',
'processhtml',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
So I went down the wrong path thinking smoothing was wrong with Uglify or concat or minification.
The error did not occur with grunt serve but did occur only after a dist package was created with grunt build:dist
So it was deceiving in a sense that my Angular app DID work fine until I created a dist package.
The issue was for me, that I originally had a <ng-include src="'scripts/navigation/navigationMobile.html'"></ng-include> element in my Index.html file.
At some point I created a custom element directive <my-nav></my-nav> which used the same templateUrl = scripts/navigation/navigationMobile.html but I forgot to remove the <ng-include src="'scripts/navigation/navigationMobile.html'"></ng-include> element from my Index.html that <my-nav></my-nav> was intended to replace.
For whatever reason the 10 $digest() iterations reached. Aborting! only occurred after running grunt build and creating the minified, Uglified vendor.js file, it did not occur when just developing and testing using grunt serve but I do not know the exact reason that the error only presented itself after grunt build.
Maybe someone can answer that.
I noticed we need to give a hint to ng-annotate in two cases:
Subclassing (ES6 class) when super class has injectables on constructor and sub class has no constructor;
$get method of a provider
Error in digest check is occurring from a task that only runs in grunt build, or is related to you creating a directive from an ng-include.
When you change from ng-include to have it as your directive's template, angular will suspend compilation until the next digest, when template is eventually loaded, even when it is already in $templateCache.
Reference: https://docs.angularjs.org/api/ng/service/$compile (see templateUrl)
As a final note, I'd have take a look on ngtemplates because it avoids requests over the wire, and angular compiles templates out-of-order when they come from an external resource, it could be a bug on your implementation of that directive or any of its parents, which is not calling $compile correctly.
To fix this error just open the Gruntfile.js file and add the line extDot: 'last' in both task cssmin and task uglify.
Ex:
cssmin: {
all: {
files: [{
expand: true,
cwd: srcDir,
src: '**/*.css',
dest: buildDir,
ext: '.min.css',
extDot: 'last'
}]
}
},
...
uglify: {
all: {
files: [{
expand: true,
cwd: srcDir,
src: ['**/*.js', '!**/*-spec.js'],
dest: buildDir,
ext: '.min.js',
extDot: 'last'
}]
}
},
New to Grunt JS. Trying to add Compass/Susy to a project that I created with Grunt/Yeoman. Not 100% sure how the difffernece but here is what i think and the overall synopsis of my problem:
Bower - strictly a package manager (lets me download and include the latest version of XYZ
Yeoman - a scaffolding. Quickly creates the barebones of a XYZ project
Grunt JS - compiles the project as I'm working on it.
If those are correct, great. I'm still running an issue when trying to include Compass into my project. All articles, blogposts or docs I've found seem to be a bit old (mid 2013) so not sure if documentation changed or anything. I've even referred to the grunt-contrib-compass docs but can't seem to figure out whats going on.
When I run the yeoman webapp generator I only include Modernizr from the three initial options (Bootstrap, Sass, Modernizr). I've tried including Compass when I've already included Sass from the generator and it always results in errors.
I've downloaded and included grunt-contrib-compass in the dev of my project, its included in my package.json file. From there, I've added the Compass Grunt options into my gruntfile.js and I've, luckily, had no error thus far. But nothing works. The file isn't being watched. I have no clue if Compass has been added corretly or at all.
Any Help?
Below are my package.json, gruntfile.js, and bower.json.
More than happy to provide anything else.
package.json
{
"name": "testapp",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.7.2",
"grunt-bower-install": "~1.4.0",
"grunt-concurrent": "~0.5.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compass": "^0.8.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.7.1",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-htmlmin": "~0.2.0",
"grunt-contrib-imagemin": "~0.6.0",
"grunt-contrib-jshint": "~0.9.2",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-mocha": "~0.4.10",
"grunt-modernizr": "~0.5.2",
"grunt-newer": "~0.7.0",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.4.0",
"grunt-usemin": "~2.1.0",
"jshint-stylish": "~0.1.5",
"load-grunt-tasks": "~0.4.0",
"time-grunt": "~0.3.1"
},
"engines": {
"node": ">=0.10.0"
}
}
Gruntfile.js
// Generated on 2014-06-12 using generator-webapp 0.4.9
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Configurable paths
var config = {
app: 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bowerInstall']
},
js: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
jstest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
sass: {
files: ['**/*.{scss,sass}'],
tasks: ['compass:dist']
},
css: {
files: ['<%= config.app %>/_sass/*.scss'],
tasks: ['compass:dist']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
}
}
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// compass
compass: {
dist: {
options: {
require: 'susy',
sassDir: '_sass',
cssDir: 'styles',
config: 'config.rb'
}
}
},
// Automatically inject Bower components into the HTML file
bowerInstall: {
app: {
src: ['<%= config.app %>/index.html'],
exclude: ['bower_components/bootstrap/dist/js/bootstrap.js']
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}]
},
styles: {
expand: true,
dot: true,
cwd: '<%= config.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Generates a custom Modernizr build that includes only the tests you
// reference in your app
modernizr: {
dist: {
devFile: 'bower_components/modernizr/modernizr.js',
outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js',
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'!<%= config.dist %>/scripts/vendor/*'
]
},
uglify: true
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'copy:styles',
'imagemin',
'svgmin'
]
}
});
// load plugins
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer'
]);
}
grunt.task.run([
'connect:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'cssmin',
'uglify',
'copy:dist',
'modernizr',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
bower.json
{
"name": "testapp",
"private": true,
"dependencies": {
"modernizr": "~2.6.2",
"jquery": "~1.11.0"
},
"devDependencies": {}
}
This is sort of a half-answer, and something I'm working one myself but haven't had the time to work through completely. You can use the Angular WebApp generator which has compass built in and then go ahead and strip out much of the angular if you want to.
In terms of getting compass up and running that type of projects it's somewhat straightforward, but not well documented. I wrote about it here.
The Compass processing should be all setup for you in Grunt.js as well as Compass contrib in your package.json file. It'll look like this, I've added the options for compass requirements and Bundler:
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n',
bundleExec: 'true',
require: ['susy','breakpoint']
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
}
Any file you want to change and have the project change in need to be in the watch function part of the file. Mine looks like this:
watch: {
/// other things being watched
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}',
'<%= yeoman.app %>/sass/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
}
I'm basically watching all files inside styles with scss and sass endings. I also setup a sass directory I added to watch.
Hope this helps a little.
I also used the yeoman/generator-webapp and I wanted also to use compass.
I followed the instruction provided on the same page under the Docs heading (We have recipes for integrating other popular technologies like Compass.)
If you already have the compass gem installed and and grunt-contrib-compass via npm, then you just go ahead replace the sass options with compass options and the update your watch and concurrent tasks in your grunt.js file.
Furthermore I also added for my own need susy, breakpoint and html5 and normalize gems and then updated my grunt.js file with the following: require: ['susy','breakpoint','compass-h5bp'] Note, don't forget to add a comma to that snippet if this is not your last line in your compass option.
I'm having problems with yeoman, specifically, when I try to run grunt, it fails on the requirejs, stating simply that "The task 'requirejs' doesn't exist". That is really strange, since in my gruntfile I have the options definition for requirejs, and I also have it installed in the package.json file. Do you know what could be the problem?
Thank you!
// Generated on 2013-03-14 using generator-webapp 0.1.5
"use strict";
var lrSnippet = require("grunt-contrib-livereload/lib/utils").livereloadSnippet;
var mountFolder = function(connect, dir) {
return connect.static(require("path").resolve(dir));
};
// # Globbing
// for performance reasons we"re only matching one level down:
// "test/spec/{,*/}*.js"
// use this if you want to match all subfolders:
// "test/spec/**/*.js"
module.exports = function(grunt) {
// load all grunt tasks
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
// configurable paths
var yeomanConfig = {
app: "app",
dist: "dist"
};
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ["<%= yeoman.app %>/scripts/{,*/}*.coffee"],
tasks: ["coffee:dist"]
},
coffeeTest: {
files: ["test/spec/{,*/}*.coffee"],
tasks: ["coffee:test"]
},
compass: {
files: ["<%= yeoman.app %>/styles/{,*/}*.{scss,sass}"],
tasks: ["compass"]
},
livereload: {
files: [
"<%= yeoman.app %>/*.html",
"{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css",
"{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js",
"<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,webp}"],
tasks: ["livereload"]
}
},
clean: {
dist: [".tmp", "<%= yeoman.dist %>/*"],
server: ".tmp"
},
jshint: {
options: {
jshintrc: ".jshintrc"
},
all: [
"Gruntfile.js",
"<%= yeoman.app %>/scripts/{,*/}*.js",
"!<%= yeoman.app %>/scripts/vendor/*",
"test/spec/{,*/}*.js"]
},
coffee: {
dist: {
files: [{
// rather than compiling multiple files here you should
// require them into your main .coffee file
expand: true,
cwd: "<%= yeoman.app %>/scripts",
src: "*.coffee",
dest: ".tmp/scripts",
ext: ".js"
}]
},
test: {
files: [{
expand: true,
cwd: ".tmp/spec",
src: "*.coffee",
dest: "test/spec"
}]
}
},
compass: {
options: {
sassDir: "<%= yeoman.app %>/styles",
cssDir: ".tmp/styles",
imagesDir: "<%= yeoman.app %>/images",
javascriptsDir: "<%= yeoman.app %>/scripts",
fontsDir: "<%= yeoman.app %>/styles/fonts",
importPath: "app/components",
relativeAssets: true
},
dist: {}
},
requirejs: {
dist: {
options: {
baseUrl: "app/scripts/editor",
optimize: "none",
preserveLicenseComments: false,
useStrict: true,
wrap: true
}
}
},
useminPrepare: {
html: "<%= yeoman.app %>/index.html",
options: {
dest: "<%= yeoman.dist %>"
}
},
usemin: {
html: ["<%= yeoman.dist %>/{,*/}*.html"],
css: ["<%= yeoman.dist %>/styles/{,*/}*.css"],
options: {
dirs: ["<%= yeoman.dist %>"]
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: "<%= yeoman.app %>/images",
src: "{,*/}*.{png,jpg,jpeg}",
dest: "<%= yeoman.dist %>/images"
}]
}
},
cssmin: {
dist: {
files: {
"<%= yeoman.dist %>/styles/main.css": [
".tmp/styles/{,*/}*.css",
"<%= yeoman.app %>/styles/{,*/}*.css"]
}
}
},
htmlmin: {
dist: {
options: {
removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: "<%= yeoman.app %>",
src: "*.html",
dest: "<%= yeoman.dist %>"
}]
}
},
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: "<%= yeoman.app %>",
dest: "<%= yeoman.dist %>",
src: [
"*.{ico,txt}",
".htaccess"]
}]
}
},
bower: {
all: {
rjsConfig: "<%= yeoman.app %>/scripts/main.js"
}
}
});
grunt.renameTask("regarde", "watch");
grunt.registerTask("server", function(target) {
if (target === "dist") {
return grunt.task.run(["build", "open", "connect:dist:keepalive"]);
}
grunt.task.run([
"clean:server",
"coffee:dist",
"livereload-start",
"connect:livereload",
"open",
"watch"
]);
});
grunt.registerTask("test", [
"clean:server",
"coffee",
"compass"
]);
grunt.registerTask("build", [
"clean:dist",
"coffee",
"compass:dist",
"useminPrepare",
"requirejs",
"imagemin",
"htmlmin",
"concat",
"cssmin",
"uglify",
"copy",
"usemin"
]);
grunt.registerTask("default", [
"jshint",
"test",
"build"
]);
};
I came across a similar problem just now, and after an hour working, I finally figure it out :)
Here is my suggest:
1 npm update
use the update command to make sure you have the packages installed.
2 check if you have made the same mistake like me.
About the 'package.json' file:
I have placed all my dependencies in "dependencies" instead of "devDependencies". By doing so, npm will still install all the packages, yet yeoman will fall to find them.