Grunt Connect Proxy Server not connecting to Proxy Server - ruby-on-rails-4

I've followed the documentation on the GCP Github but that did not proxy requests to my rails server. I've read that there are middleware changes but those haven't worked either.
I had this working a month ago but sadly deleted the project that contained the working Gruntfile.js.(Hate myself so bad right now). Tried recovering the deleted file but to no avail!
Here is my yeoman angular generated code and rails api code for review. I've SOF a couple of posts with suggested middleware changes but they don't work!
I should be seeing the proxied request in my grunt serve console, but it just loads the task. Any helpful advice? Bout to quit yeoman and just build my dev tools with Gulp at this point.

See the "setting up a proxy" section of this post. If it's not clear what's different between those instructions and what you're doing, I'd suggest following the tutorial and see if any lightbulbs come on during that process.
Here's my working Gruntfile.js:
// Gruntfile.js
// Generated on 2014-07-18 using generator-angular 0.9.5
'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']
},
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: 'localhost',
livereload: 35729
},
proxies: [
{
context: '/api',
host: 'localhost',
port: 3000
}
],
livereload: {
options: {
open: true,
middleware: function (connect, options) {
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Setup the proxy
var middlewares = [
require('grunt-connect-proxy/lib/utils').proxyRequest,
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
// Make directory browse-able.
var directory = options.directory || options.base[options.base.length - 1];
middlewares.push(connect.directory(directory));
return middlewares;
}
}
},
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']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the app
wiredep: {
options: {
cwd: '<%= yeoman.app %>'
},
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}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',
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: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
// 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']
}
},
// 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 %>'
}]
}
},
// 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.
ngmin: {
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}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
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: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'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',
'configureProxies',
'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',
'concurrent:test',
'autoprefixer',
'configureProxies',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
grunt.loadNpmTasks('grunt-connect-proxy');
};

Related

Ionic "Grunt Serve" error on Centos 7: Running "concurrent:server" (concurrent) task

I have an Ionic project with Grunt, that is built by Yeoman. I managed to configure it to work properly on my local computer that runs on Fedora 22.
For now, I am trying to configure it on an Centos 7 server instance and I installed all dependencies like locally, but when I run "grunt serve" I get the following error:
Running "concurrent:server" (concurrent) task
Warning: FATAL ERROR: Evacuation Allocation failed - process out of memory Use --force to continue.
Aborted due to warnings.
I am still in the learning phase and am not much experienced with the mentioned technologies, but for now I managed it to work locally.
When I run in my terminal "grunt serve --force", the application is running, but it's not compiled well, because some css is a bit messed up, and it shows the following warnings:
Running "concurrent:server" (concurrent) task
Warning: FATAL ERROR: Evacuation Allocation failed - process out of memory Used --force, continuing.
Warning: FATAL ERROR: Evacuation Allocation failed - process out of memory Used --force, continuing.
I don't think that the memory is an issue here, because the server is especially instantiated just for the UI and everything else is on the other servers and when I run "free" it shows that I have enough free space:
total 1015944 used 169712 free 780212
shared 13036
buff/cache 66020
available 742956
Swap: 0 0 0
Here are the contents of my Gruntfile.js:
// Generated on 2015-02-06 using generator-angular 0.11.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: 'www'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: appConfig,
// Ng constants - used for environment based configs
ngconstant: {
options: {
name: 'config',
wrap: '"use strict";\n\n{%= __ngModule %}',
space: ' '
},
local: {
options: {
dest: '<%= yeoman.app %>/scripts/config.js',
},
constants: {
ENV: 'local',
CONFIG: grunt.file.exists('config/local.config.json') ?
grunt.file.readJSON('config/local.config.json') :
grunt.file.readJSON('config/default.config.json')
}
},
dev: {
options: {
dest: '<%= yeoman.app %>/scripts/config.js',
},
constants: {
ENV: 'dev',
CONFIG: grunt.file.readJSON('config/dev.config.json')
}
}
},
// 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', '<%= yeoman.app %>/scripts/{,*/}/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
html: {
files: ['<%= yeoman.app %>/views/{,*/}*.html', '<%= yeoman.app %>/*.html'],
tasks: [],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
ionic: {
files: ['<%= yeoman.app %>/ionic/scss/{,*/}*.{scss,sass}'],
tasks: ['compass:ionic', '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')
,function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', '*');
next();
}
),
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']
},
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}}\','
}
}
}
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}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: './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'
}
},
server: {
options: {
sourcemap: true
}
},
ionic: {
options: {
debugInfo: true,
sassDir: '<%= yeoman.app %>/ionic/scss',
cssDir: '<%= yeoman.app %>/ionic/release/css',
fontsDir: '<%= yeoman.app %>/ionic/release/fonts',
httpFontsPath: '/fonts'
}
}
},
// 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', '!oldieshim.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: '<%= yeoman.app %>/ionic/release/fonts',
dest: '<%= yeoman.dist %>/fonts',
src: ['{,*/}*.*']
}]
},
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: [
'compass:server',
'compass:ionic'
],
test: [
'compass',
'compass:ionic'
],
dist: [
'compass:dist',
'compass:ionic',
'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',
'ngconstant:local',
'wiredep',
'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.registerTask('test', [
'clean:server',
'wiredep:test',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
grunt.registerTask('build', function (target) {
var ngconstant = typeof target !== 'undefined' ? 'ngconstant:'+target : 'ngconstant:dev';
grunt.task.run([
'clean:dist',
ngconstant,
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
});
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
Finally I managed somehow to build the project with "grunt build", but had issues with grunt-contrib-imagemin and grunt-ng-annotate. I couldn't build it until I updated the versions of the mentioned to the newest and ran "npm install". Still, the compiled, built project had the same problem as above, the images won't show and the scss went missing.
The scss problem I solved by uncommenting the following in my Gruntfile:
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'
}]
}
},
The images that are hardcoded in the html show fine, but other images are minified and renamed to for example to image.27c803.jpg, but the app still asks for image.jpg. So, temporarily I solved it by copying the source images inside the /images folder, but it's a hard work by doing it every time I build the project.
I managed to alternatively resolve the issue.I just commented the line that renames the images. Now the images are copied with their original names, but I am not sure if they are minified. However, it works now properly.
// 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/*'
]
}
},

Error "no global: `self` or `global` found" running ember-template-compiler in grunt

Trying to upgrade an Ember project to version 2, still using Grunt as the build tool, getting this error after adding ember-template compiler task:
"Running "emberTemplates:dist" (emberTemplates) task
Error: ember-template-compiler.js:869
throw new Error('no global: self or global found');
^
no global: self or global found
Warning: Ember Handlebars failed to compile..."
bower.json:
{
"name": "frb-ember",
"version": "2.0.0",
"dependencies": {
"ember": "2.0.1",
"ember-data": "2.0",
"handlebars": "2.0.0",
"bootstrap-sass-official": "3.1.1",
"bootstrap": "latest",
"moment": "~2.9.0",
"d3": "latest"
},
"resolutions": {
"ember": ">= 1.13.0 < 2.0.1"
},
"devDependencies": {
"ember-mocha-adapter": "0.2.1"
}
}
/////
package.json
{
"name": "frb-ember",
"version": "0.0.0",
"dependencies": {
"lodash": "^3.7.0",
"moment": "^2.9.0"
},
"devDependencies": {
"connect-livereload": "~0.2.0",
"ember-data": "^1.0.0-beta.16",
"ember-template-compiler": "~1.9.0-alpha",
"grunt": "~0.4.1",
"grunt-concurrent": "~0.3.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compass": "~0.5.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.3.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-imagemin": "~0.8.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-ember-templates": "*",
"grunt-include-bootstrap": "^0.1.1",
"grunt-mocha": "~0.4.1",
"grunt-neuter": "~0.6.0",
"grunt-open": "~0.2.0",
"grunt-replace": "~0.4.4",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.2.0",
"grunt-usemin": "^2.1.1",
"jshint-stylish": "~0.1.3",
"load-grunt-tasks": "~0.1.0",
"time-grunt": "~0.1.1"
},
"engines": {
"node": ">=0.8.0"
}
}
/////
Gruntfile.js
// Generated on 2015-03-03 using generator-ember 0.8.6
'use strict';
var LIVERELOAD_PORT = 35730;
var lrSnippet = require('connect-livereload')({
port: LIVERELOAD_PORT
});
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) {
// show elapsed time at the end
require('time-grunt')(grunt);
// load all grunt tasks
require('load-grunt-tasks')(grunt);
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
emberTemplates: {
files: '<%= yeoman.app %>/templates/**/*.hbs',
tasks: ['emberTemplates']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server']
},
neuter: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['neuter']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'.tmp/scripts/*.js',
'<%= yeoman.app %>/*.html',
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
'<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
connect: {
options: {
port: process.env.PORT || 8000,
// change this to '0.0.0.0' to access the server from outside
hostname: process.env.IP || 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function(connect) {
return [
mountFolder(connect, 'test'),
mountFolder(connect, '.tmp')
];
}
}
},
dist: {
options: {
middleware: function(connect) {
return [
mountFolder(connect, yeomanConfig.dist)
];
}
}
}
},
open: {
server: {
path: 'http://<%= connect.options.hostname %>:<%= connect.options.port %>'
}
},
include_bootstrap: {
files: {
'<%= yeoman.app %>/styles.css': '<%= yeoman.app %>/styles/less/manifest.less',
},
},
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp'
},
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js',
'!<%= yeoman.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= connect.options.hostname %>:<%= connect.options.port %>/index.html']
}
}
},
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/img/generated',
imagesDir: '<%= yeoman.app %>/img',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '/img',
httpGeneratedImagesPath: '/img/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false
},
dist: {},
server: {
options: {
debugInfo: false
}
}
},
// not used since Uglify task does concat,
// but still available if needed
/*concat: {
dist: {}
},*/
// not enabled since usemin task does concat and uglify
// check index.html to edit your build targets
// enable this task if you prefer defining your build targets here
/*uglify: {
dist: {}
},*/
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/img/{,*/}*.{png,jpg,jpeg,gif,webp}',
'<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
]
}
}
},
useminPrepare: {
html: '.tmp/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: ['<%= yeoman.dist %>/scripts/**/*.js'],
options: {
dirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
patterns: {
js: [
[/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files']
]
}
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/img',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/img'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/img',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/img'
}]
}
},
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 %>'
}]
}
},
replace: {
app: {
options: {
variables: {
ember: 'bower_components/ember/ember.js',
ember_data: 'bower_components/ember-data/ember-data.js'
}
},
files: [{
src: '<%= yeoman.app %>/index.html',
dest: '.tmp/index.html'
}]
},
dist: {
options: {
variables: {
ember: 'bower_components/ember/ember.prod.js',
ember_data: 'bower_components/ember-data/ember-data.prod.js'
}
},
files: [{
src: '<%= yeoman.app %>/index.html',
dest: '.tmp/index.html'
}]
}
},
// Put files not handled in other tasks here
copy: {
fonts: {
files: [{
expand: true,
flatten: true,
filter: 'isFile',
cwd: '<%= yeoman.app %>/bower_components/',
dest: '<%= yeoman.app %>/styles/fonts/',
src: [
'bootstrap-sass-official/vendor/assets/fonts/bootstrap/**'
]
}]
},
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,txt}',
'.htaccess',
'img/**/*.{webp,gif,ico,png}',
'styles/fonts/**/*'
]
}]
}
},
concurrent: {
server: [
'emberTemplates',
'compass:server'
],
test: [
'emberTemplates',
'compass'
],
dist: [
'emberTemplates',
'compass:dist',
'imagemin',
'svgmin',
'htmlmin'
]
},
emberTemplates: {
options: {
templateCompilerPath: '<%= yeoman.app %>/bower_components/ember/ember-template-compiler.js',
handlebarsPath: '<%= yeoman.app %>/bower_components/handlebars/handlebars.js',
templateNamespace: 'HTMLBars',
templateName: function(sourceFile) {
var templatePath = yeomanConfig.app + '/templates/';
return sourceFile.replace(templatePath, '');
}
},
dist: {
files: {
'.tmp/scripts/compiled-templates.js': '<%= yeoman.app %>/templates/**/*.hbs'
}
}
},
neuter: {
app: {
options: {
filepathTransform: function(filepath) {
return yeomanConfig.app + '/' + filepath;
}
},
src: '<%= yeoman.app %>/scripts/app.js',
dest: '.tmp/scripts/combined-scripts.js'
}
}
});
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('serve', function(target) {
if (target === 'dist') {
return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'replace:app',
'concurrent:server',
'neuter:app',
'copy:fonts',
'connect:livereload',
'open',
'watch'
]);
});
grunt.registerTask('test', [
'clean:server',
'replace:app',
'concurrent:test',
'connect:test',
'neuter:app',
'mocha'
]);
grunt.registerTask('build', [
'clean:dist',
'replace:dist',
'include_bootstrap',
'useminPrepare',
'emberTemplates',
'concurrent:dist',
'neuter:app',
'concat',
'cssmin',
'uglify',
'copy',
'rev',
'usemin'
]);
grunt.loadNpmTasks('grunt-ember-templates');
grunt.registerTask('default', [
'jshint',
'test',
'emberTemplates',
'build'
]);
};
Thanks for any help!

grunt imagemin error: Fatal error: write EPIPE

I'm getting the above error when I run the grunt dist, It worked perfectly fine with my other machine.
Please find my gruntfile.
$ grunt imagemin.
Running "imagemin:png" (imagemin) task
Minified 132 images (saved 134.02 kB)
Running "imagemin:gif" (imagemin) task
Fatal error: write EPIPE
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9001,
livereload: true,
hostname: 'localhost',
base: ['.']
}
}
},
watch: {
options: {
livereload: true
},
all: {
files: ['Content/**/*.scss'],
tasks: 'sass'
}
},
open: {
all: {
path: 'http://localhost:9001/app/index.html'
}
},
concat: {
style: {
src: [
"Content/font-awesome/css/font-awesome.min.css",
"Content/scss/all.scss",
"Content/scss/_buttons.scss"],
dest: 'Content/dist/scss/style.scss'
},
ie: {
cwd: 'Content',
expand: true,
src: [
"scss/ie9.scss",
"scss/ie8.scss"
],
dest: 'Content/dist'
}
},
sass: {
dist: {
options: {
style: 'expand',
compass: true,
},
files: {
'Content/dist/css/style.css': 'Content/dist/scss/style.scss',
'Content/dist/css/ie8.css': 'Content/dist/scss/ie8.scss',
'Content/dist/css/ie9.css': 'Content/dist/scss/ie9.scss'
}
}
},
cssmin: {
css:{
files: {
'Content/dist/ie8.css': 'Content/dist/css/ie8.css',
'Content/dist/ie9.css': 'Content/dist/css/ie9.css',
'Content/dist/style.css': 'Content/dist/css/style.css'
}
}
},
imagemin: {
png: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.png',
dest: 'Images/dist/'
}]
},
gif: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.gif',
dest: 'Images/dist/'
}]
},
ico: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.ico',
dest: 'Images/dist/'
}]
},
jpg: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.jpg',
dest: 'Images/dist/'
}]
},
jpeg: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.jpeg',
dest: 'Images/dist/'
}]
}
},
clean: {
build : {
src: ['Content/dist/', 'Images/dist', 'Scripts/dist']
},
scss: {
src: ['Content/dist/scss', 'Content/dist/css']
},
map: {
src: 'Content/dist/css/*.map'
},
js: {
src: ['Scripts/temp']
}
},
compass: {
dist: {
options: {
sassDir: 'app/sass',
cssDir: 'Content/dist/css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-open');
grunt.registerTask('server', function() {
grunt.task.run([
'connect',
'open',
'watch'
]);
});
grunt.registerTask('dist', 'Running the minification job for production', function() {
grunt.task.run([
'clean:build',
'concat',
'sass',
'cssmin',
'imagemin',
'clean:scss',
'clean:js'
]);
});
};

famo.us handler.js errors after altering main.js

After installing famo.us, anytime I try to modify the main.js file with anything other than the default surfaceImage grunt serve simply throws a bunch of handler.js errors and will not load the page.
I can add different images and modify the size of the imageSurface without any issues but as soon as I try to add a surface or add properties to the existing imageSurface I get errors.
This happens with all of the examples posted on GitHub as well (running from the example main.js file). The errors below are pretty typical of what I see anytime I modify the main.js file:
>> File "app\src\main.js" changed.
Running "jscs:src" (jscs) task
Multiple var declaration at app/src/handler.js :
6 |var mainContext = Engine.createContext();
7 |
8 |var surfaceA, surfaceB;
--------^
9 |createSurfaces();
10 |
Illegal trailing whitespace at app/src/handler.js :
33 | }
34 | });
35 |
----------^
36 | surfaceB = new Surface({
37 | size: [100, 100],
Illegal trailing whitespace at app/src/handler.js :
43 | }
44 | });
45 |
----------^
46 | var modifierB = new StateModifier({
47 | origin: [1, 1]
Illegal trailing whitespace at app/src/handler.js :
47 | origin: [1, 1]
48 | });
49 |
----------^
50 | mainContext.add(surfaceA);
51 | mainContext.add(modifierB).add(surfaceB);
Missing line feed at file end at app/src/handler.js :
50 | mainContext.add(surfaceA);
51 | mainContext.add(modifierB).add(surfaceB);
52 |}
--------^
>> 5 code style errors found!
Warning: Task "jscs:src" failed. Use --force to continue
.
I'm still super new to this, so I'm sure I'm missing something pretty stupid, not sure what though. Anyone else have an issue like this?
What you are encountering are the style guides that Famo.us would like you to follow if you are interested in participating in the open source development, or building community plugins.
As you can see, the style guides are very picky.. If you want to just get up and running quick you can simply disable the packages that are enforcing the style. These are eslint and jscs..
Go into your Gruntfile.js and comment out the set of lines under "THIS LINE" or "THESE LINES" to make it look like the following..
Hope this works for you!
/*global module:false*/
/*Generated initially from grunt-init, heavily inspired by yo webapp*/
module.exports = function(grunt) {
'use strict';
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Project configuration.
grunt.initConfig({
// Project settings
config: {
// Configurable paths
app: 'app',
dist: 'dist'
},
// THESE LINES ///////////////
// eslint: {
// options: {
// config: '.eslintrc'
// },
// target: ['<%= config.app %>/src/**/**.js']
// },
// THESE LINES ///////////////
// jscs: {
// src: ['<%= config.app %>/src/**/**.js', 'Gruntfile.js'],
// options: {
// config: '.jscsrc'
// }
// },
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bower']
},
js: {
files: ['<%= config.app %>/src/**/**.js'],
// THIS LINE ///////////////
// tasks: ['jscs', 'eslint'],
options: {
livereload: true
}
},
gruntfile: {
files: ['Gruntfile.js']
},
css: {
files: ['<%= config.app %>/css/{,*/}*.css'],
options: {
livereload: true
}
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= config.app %>/{,*/}*.html',
'<%= config.app %>/styles/**/**.css',
'<%= config.app %>/images/{,*/}*'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: grunt.option('port') || 5555,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
dist: {
options: {
open: true,
base: '<%= config.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Automagically wire-up installed Bower components into your RequireJS config
bower: {
raget: {
rjsConfig: '<%= config.app %>/src/requireConfig.js'
}
},
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/src/{,*/}*.js',
'<%= config.dist %>/css/{,*/}*.css',
// '<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/css/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
processhtml: {
dev: {
files: {
'.tmp/index.html': ['<%= config.app %>/index.html']
}
},
dist: {
files: {
'<%= config.dist %>/index.html': ['<%= config.app %>/index.html']
}
},
options: {
commentMarker: 'process'
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, uglify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.dist %>/index.html'
},
// Performs reqrite based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/css/{,*/}*.css']
},
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 %>'
}]
}
},
// 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,jpg}',
'.htaccess',
'images/{,*/}*.webp',
// '{,*/}*.html',
'styles/fonts/{,*/}*.*',
'lib/famous/**/**.css'
]
}]
}
},
requirejs: {
compile: {
options: {
optimize: 'uglify2',
uglify2: {
mangler: {
toplevel: true
}
},
baseUrl: '<%= config.app %>/src',
mainConfigFile: '<%= config.app %>/src/requireConfig.js',
name: 'almond',
include: 'main',
insertRequire: ['main'],
out: '<%= config.dist %>/src/main.js',
wrap: true
}
}
}
});
grunt.registerTask('serve', function(target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
// THESE LINES ///////////////
// 'jscs',
// 'eslint',
'processhtml:dev',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('build', [
'clean:dist',
// THESE LINES ///////////////
// 'jscs',
// 'eslint',
'processhtml:dist',
'useminPrepare',
'requirejs',
'concat',
'cssmin',
'uglify',
'copy:dist',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'build'
]);
};
A short cut to force it to run or build would be to use the --force option.
Like:
grunt serve --force
or
grunt --force
just make sure there are no non-formatting issues.

Why are the build blocks in my customized yeoman phpwebapp causing grunt build to fail?

I'm using the new Yeoman generator phpwebapp. I've tweaked my Gruntfile and index a bit so that I can use it with a CMS.
The blocks in the index that are supposed to uglify (concatenate and minify) scripts cause grunt build to fail.
The uglify task in grunt.initConfig succeeds, it is only the blocks that are failing.
The Error
Running "uglify:dist" (uglify) task
File "dist/_themes/cb/js/cb.js" created.
Uncompressed size: 48 bytes.
Compressed size: 31 bytes gzipped (16 bytes minified).
Running "uglify:dist/scripts/plugins.js" (uglify) task
Warning: Uglification failed. Use --force to continue.
Example of block that causes build to fail.
<!-- build:js scripts/plugins.js -->
<script src="components/sass-bootstrap/js/bootstrap-affix.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-alert.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-modal.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-transition.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-button.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-popover.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-carousel.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-collapse.js"></script>
<script src="components/sass-bootstrap/js/bootstrap-tab.js"></script>
<!-- endbuild -->
My Gruntfile
'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
// Statamic Vars
var theme_name = 'cb',
theme_path = '_themes/' + theme_name; // cssmin and uglify settings don't accept vars
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/' + theme_path + '/coffee/*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/*.coffee'],
tasks: ['coffee:test']
},
compass: {
files: ['<%= yeoman.app %>/' + theme_path + '/scss/*.{scss,sass}'],
tasks: ['compass']
},
livereload: {
files: [
'<%= yeoman.app %>/' + theme_path + '/{layouts,partials,templates}/*.html',
'<%= yeoman.app %>/*.php',
'{.tmp,<%= yeoman.app %>}/' + theme_path + '/css/*.css',
'{.tmp,<%= yeoman.app %>}/' + theme_path + '/js/*.js',
'<%= yeoman.app %>/' + theme_path + '/img/*.{png,jpg,jpeg,webp}'
],
tasks: ['livereload']
}
},
connect: {
options: {
port: 9000,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'app')
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, 'dist')
];
}
}
}
},
open: {
server: {
url: 'http://localhost.curtisblackwell.com'
}
},
clean: {
dist: ['.tmp', '<%= yeoman.dist %>/*'],
server: '.tmp',
build: '<%= yeoman.dist %>/scripts/remove-me-on-build.js'
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/' + theme_path + '/js/*.js',
'test/spec/*.js'
]
},
mocha: {
all: {
options: {
run: true,
urls: ['http://localhost:<%= connect.options.port %>/index.html']
}
}
},
coffee: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/' + theme_path + '/js',
src: '*.coffee',
dest: '.tmp/' + theme_path + '/js',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: '.tmp/spec',
src: '*.coffee',
dest: 'test/spec'
}]
}
},
compass: {
options: {
sassDir: '<%= yeoman.app %>/' + theme_path + '/scss',
cssDir: '.tmp/' + theme_path + '/css',
imagesDir: '<%= yeoman.app %>/' + theme_path + '/img',
javascriptsDir: '<%= yeoman.app %>/' + theme_path + '/js',
fontsDir: '<%= yeoman.app %>/' + theme_path + '/css/fonts',
importPath: 'app/components',
relativeAssets: true
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
// not used since Uglify task does concat,
// but still available if needed
/*concat: {
dist: {}
},*/
uglify: {
dist: {
files: {
'<%= yeoman.dist %>/_themes/cb/js/cb.js': [
'<%= yeoman.app %>/' + theme_path + '/js/*.js'
],
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/' + theme_path + '/{layouts,partials,templates}/**',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/' + theme_path + '/{layouts,partials,templates}/**'],
css: ['<%= yeoman.dist %>/' + theme_path + '/css/*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>',
src: '{assets/img/**,' + theme_path + '/img/*.{png,jpg,jpeg}}',
dest: '<%= yeoman.dist %>'
}]
}
},
cssmin: {
dist: {
files: {
'<%= yeoman.dist %>/_themes/cb/css/cb.css': [
'.tmp/' + theme_path + '/css/*.css',
'<%= yeoman.app %>/' + theme_path + '/css/*.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: '/' + theme_path + '/templates/' + '*.html',
dest: '<%= yeoman.dist %>'
}]
}
},
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,txt,php}',
'.htaccess',
'_{add-ons,app,cache,config,content,cp,logs}/**'
]
}]
}
},
bower: {
all: {
rjsConfig: '<%= yeoman.app %>/' + theme_path + '/js/' + theme_name + '.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',
'compass:server',
'livereload-start',
'connect:livereload',
'open',
'watch'
]);
});
grunt.registerTask('test', [
'clean:server',
'coffee',
'compass',
'connect:test',
'mocha'
]);
grunt.registerTask('build', [
'clean:dist',
'coffee',
'compass:dist',
'useminPrepare',
'imagemin',
'cssmin',
'htmlmin',
// 'concat',
'uglify',
'copy',
'usemin',
'clean:build'
]);
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
};
As I already commented, I guess it's because there are no files to be uglified. In my project I solved it by changing the uglify-config to this:
uglify: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: ['**/*.js'],
dest: '<%= yeoman.dist %>/scripts'
}]
}
},
This simply loops through all available files in the dist/scripts folder and just uglifies them there. There may be a more sophisticated solution but in my case it works.