What does {,*/}*.* mean in Gruntfile.js - javascript

Opening Gruntfile.js generated by yeoman, I see this:
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'
}
},
What does {,*/}*.* mean? I can see it's trying to grab everything from the folder and I know * means any character. But I have no idea what the pattern do exactly...
Please help. Thank you very much.

{,*/}*.* is equivalent to */*.* OR *.*
It is a globbing pattern to search all files but only 1 folder deep.
If you want to search the files in all the subdirectories, you can use something like **/*.* but it can use more CPU if the folder tree is deep.

Related

Plugin for task not found (Grunt)

I have next task for copy files, this test task and he changes in future, but he not running
pluginsCopy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/public',
src: [
'*.{ico,png,txt}',
'.htaccess',
'bower_components/**/*',
'assets/images/{,*/}*.{webp}',
'assets/js/{,*/}*.{webp}',
'assets/js/**/*',
'assets/fonts/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/public/assets/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/public/assets/images',
src: ['generated/*']
},
{
expand: true,
dest: '<%= yeoman.dist %>',
src: [
'package.json',
'server/**/*'
]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.client %>',
dest: '.tmp/',
src: ['{app,components}/**/*.css']
}
}
Register task:
grunt.registerTask('pluginsCp', function () {
grunt.task.run(['pluginsCopy']);
});
and run :
grunt pluginsCp
But I have next trouble:
jit-grunt: Plugin for the "pluginsCopy" task not found.
If you have installed the plugin already, please setting the static mapping.
See Static Mappings on GitHub.
Why grunt search plugin for my task?

Grunt file not doing a proper build

So I started my project using Yeoman with 'yo angular'. Since, I have added additional file structure (i.e. broke views and scripts into folders based on project area), added additional packages to use in my project, etc.... Running 'grunt serve' and it loads and works great locally as it should. Prior to this I hadn't done anything with grunt so just went with the default provided with the build from yo angular. Hadn't modified it yet. So when time to port this to a server and going to run just 'grunt' so that I get what I need to deploy, this is where I am having issues.
Here is my gruntfile.js:
// Generated on 2015-04-02 using generator-angular 0.11.1
'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 for the application
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: appConfig,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', '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: 'localhost',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= yeoman.dist %>'
}
}
},
// 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',
'<%= 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']
},
server: {
options: {
map: true,
},
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
test: {
devDependencies: true,
src: '<%= karma.unit.configFile %>',
ignorePath: /\.\.\//,
fileTypes:{
js: {
block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
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: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
]
}
},
// The following *-min tasks will produce minified files in the dist folder
// 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: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= yeoman.dist %>/scripts/scripts.js': [
// '<%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// 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,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'views/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// ng-annotate tries to make the code safe for minification automatically
// by using the Angular long form for dependency injection.
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},
// 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/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: 'bower_components/bootstrap/dist',
src: 'fonts/*',
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'copy:styles',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'test/karma.conf.js',
singleRun: true
}
}
});
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', 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',
'wiredep',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
So when I do this, the first thing that fails is the test with this:
PhantomJS 1.9.8 (Windows 8): Executed 2 of 2 (2 FAILED) ERROR (0.04
secs / 0.016 secs) Warning: Task "karma:unit" failed. Use --force to
continue.
So then I simple run 'grunt --force'. Then, it seems to run fine, but has many warnings and in the "dist" folder, I only get root level html files (the index.html and 404.html) and just the fonts folder. None of the other views and none of the scripts or anything are shown or taken care of. My project folder structure is as shown in the attached 2 images:
and
Again, I simple want to build it all to one folder as I thought it did. Not worried yet of test and all.
Can anyone here assist please?
Thanks much.
Your copy task is only copying the root level html files and html files under the directory views which you don't have on your project.
Assuming that brok, emp, ppt, shared has html files in it; I suggest you try to modify your copy task to be:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'brok/{,*/}*.html',
'emp/{,*/}*.html',
'ppt/{,*/}*.html',
'shared/{,*/}*.html',
'images/{,*/}*.{webp}',
'styles/fonts/{,*/}*.*'
]
}, ....
},
Also htmlmin to be modified like this
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'brok/{,*/}*.html', 'emp/{,*/}*.html', 'ppt/{,*/}*.html', 'shared/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},

Grunt build causing Angular app to crash on dist

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'
}]
}
},

Yeoman + Grunticon: Gruntfile.js problems

So i'm trying to use grunticon into my yo webapp (yeoman) but it says it cannot read any files.
Gruntfile.js:
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images/svg-src/',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images/svg-src/'
}]
}
},
grunticon: {
myIcons: {
options: {
src: '<%= config.app %>/images/svg-src/',
dest: '<%= config.app %>/images/svg-dist/'
}
}
},
Full Gruntfile.js: https://gist.github.com/ricardobanegas/6c8c4ad3ac57f49728d7
Patch: https://gist.github.com/ricardobanegas/7f2933bfb8e58d7ef30c
Unix:
$ grunt grunticon:myIcons
Running "grunticon:myIcons" (grunticon) task
Look, it's a grunticon!
Grunticon has no files to read!
Done, without errors.
So the question is really, why is Gruntfile.js not finding my images inside app/images/svg-src/?
References:
Grunticon
Yeoman+Grunticon install guidelines
Any ideas?
This was changed since version 1.0.0: https://github.com/filamentgroup/grunticon#whats-changed-in-this-major-version
Looks like I was following an old tutorial. Using files: [] instead of options: {} solved the problem:
grunticon: {
myIcons: {
files: [{
expand: true,
cwd: '<%= config.app %>/images/svg-src/',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images/svg-dist/'
}],
options: {
}
}
},
src must point to actual files, not just a folder.
src: '<%= config.app %>/images/svg-src/*.svg'

Grunt Concat Task, how to ignore all .min.js files?

I have the following grunt concat task. How can I make concat ignore all minified files? This doesn't work.
concat: {
js: {
src: [
'<%= globalConfig.bar %>',
'<%= globalConfig.foo %>/*.js',
'<%= globalConfig.foo %>/!*.min.js',
'<%= globalConfig.fooLib %>/*.js',
'<%= globalConfig.fooLib %>/!*.min.js'
],
dest: '../../foo/fooCombined.js'
},
css: {
src: ['<%= globalConfig.foo %>/*.css'],
dest: '../../foo/fooCombined.css'
}
},
This also doesn't work:
'<%= globalConfig.fooLib %>/(*.js && !*min.js)'
Any help is appreciated. Thanks.
Try this:
concat: {
js: {
src: [
'<%= globalConfig.bar %>',
'<%= globalConfig.foo %>/*.js',
'<%= globalConfig.fooLib %>/*.js',
'!**/*.min.js'
],
dest: '../../foo/fooCombined.js'
},
css: {
src: ['<%= globalConfig.foo %>/*.css'],
dest: '../../foo/fooCombined.css'
}
},
Negate or ! is placed at the beginning of a valid pattern to produce the opposite effect. Patterns are processed in order, so placing a negated pattern that you wish to exclude at the end, will do the trick.
See http://gruntjs.com/configuring-tasks#globbing-patterns for more info.

Categories

Resources