how to minify files with grunt? - angularjs

Question

I am creating an angular app with grunt/yeoman and trying to create a public version with minified files. The problem is that no js files and css is created:
// Generated on 2015-06-01 using generator-angular 0.10.0
'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({
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['app/{,*/}*.js','app/**/*.json'],
tasks: ['newer:jshint:all'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
compass: {
files: ['app/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'app/**/*.html',
'app/**/*.js',
'app/**/*.json',
'.tmp/styles/{,*/}*.css',
'app/styles/{,*/}*.css',
'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.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: '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',
'app/scripts_old/{,*/}*.js'
]
},
test: {
options: {
jshintrc: 'test/.jshintrc'
},
src: ['test/spec/{,*/}*.js']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'dist/{,*/}*',
'!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
wiredep: {
app: {
src: ['app/index.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['app/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: 'app/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: 'app/images',
javascriptsDir: 'app/scripts_old',
fontsDir: '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'
},
dist: {
options: {
generatedImagesDir: 'dist/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'dist/scripts_old/{,*/}*.js',
'dist/styles/{,*/}*.css',
'dist/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'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: 'app/index.html',
options: {
dest: 'dist',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['dist/{,*/}*.html'],
css: ['dist/styles/{,*/}*.css'],
js: ['dist/scripts/{,*/}*.js'],
options: {
assetsDirs: [
'dist',
'dist/images',
'dist/styles'
],
patterns: {
js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
}
}
},
// 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: {
'dist/styles/main.css': [
'.tmp/styles/{,*/}*.css'
]
}
}
},
uglify: {
dist: {
files: {
'dist/scripts/scripts.js': [
'dist/scripts/scripts.js'
]
}
}
},
concat: {
dist: {}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'app/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: 'dist/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: 'app/images',
src: '{,*/}*.svg',
dest: 'dist/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: 'dist',
src: ['*.html', 'views/{,*/}*.html'],
dest: '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', '!oldieshim.js'],
dest: '.tmp/concat/scripts'
}]
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['dist/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: 'app',
dest: 'dist',
src: [
'*.{ico,png,txt}',
'.htaccess',
'modules/**.*.js',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'fonts/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: 'dist/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
dest: 'dist'
}]
},
styles: {
expand: true,
cwd: 'app/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// 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: 'test/karma.conf.js',
singleRun: true
}
},
protractor: {
options: {
keepAlive: true,
configFile: "test/protractor.conf.js"
},
run: {}
}
});
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
grunt.log.warn('running grunt serve , value of target',target);
if (target === 'dist') {
grunt.log.warn('target = dist');
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'test',
//'concurrent:server',
'autoprefixer',
'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.loadNpmTasks("grunt-protractor-runner");
grunt.registerTask('test', [
'clean:server',
//'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
//'protractor:run'
]);
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'
]);
};
The directory structure looks like this:
app/modules/
styles
commone///partials
When I run grunt build I get:
Loading "imagemin.js" tasks...ERROR
>> Error: Cannot find module 'imagemin-gifsicle'
>> Local Npm module "grunt-google-cdn" not found. Is it installed?
Running "clean:dist" (clean) task
Cleaning dist/.htaccess...OK
Cleaning dist/404.html...OK
Cleaning dist/bower_components...OK
Cleaning dist/index.html...OK
Cleaning dist/robots.txt...OK
Running "wiredep:app" (wiredep) task
Running "wiredep:sass" (wiredep) task
Running "autoprefixer:dist" (autoprefixer) task
Running "concat:dist" (concat) task
Running "ngAnnotate:dist" (ngAnnotate) task
>> No files provided to the ngAnnotate task.
Running "copy:dist" (copy) task
Copied 9 files
Running "cssmin:dist" (cssmin) task
>> Destination not written because minified CSS was empty.
Running "uglify:dist" (uglify) task
>> Destination dist/scripts/scripts.js not written because src files were empty.
Running "filerev:dist" (filerev) task
Running "usemin:html" (usemin) task
Replaced 2 references to assets
Running "usemin:css" (usemin) task
Replaced 0 references to assets
Running "usemin:js" (usemin) task
Replaced 0 references to assets
Running "htmlmin:dist" (htmlmin) task
Minified dist/404.html 3.53 kB → 3.39 kB
Minified dist/index.html 1.16 kB → 1.07 kB
Done, without errors.
How can I generate css and js files?

Answer 1

Could you please ensure that you do have correct source file mapped in uglify configuration.As per your current above pasted script the src and destination both files are with same name.
uglify: {
dist: {
files: {
'dist/scripts/scripts.js': [
'dist/scripts/scripts.js'
]
}
}
}
You can go through with this for more information. Initially try to make it work with simple configuration like this :
uglify: {
dist: {
files: {'dest/b.js': ['src/bb.js', 'src/bbb.js']}
}
}
How does the htmlmin task work see here. and for where are those files located in the dist folder see below
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: 'dist',
src: ['*.html', 'views/{,*/}*.html'],
dest: 'dist'
}]
}
}