angularjs - Angular-Fullstack - grunt build no incluye archivos javascript
OK, publico esta pregunta en la lista de issues de Angular-Fullstack en GitHub para que también puedas revisarla allí y ver si hay publicaciones adicionales que no estén aquí. pregunta en GitHub
Básicamente estoy obteniendo la siguiente salida en la consola:
GET http://localhost:8080/assets/images/loading.gif 404 (Not Found) (index):60
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/profile/_profile-ctrl.js (index):102
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate-list/candidates-list-controller.js (index):100
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/_candidate-ctrl.js (index):101
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/summary/_summary-ctrl.js (index):103
GET http://localhost:8080/app/home/home-controller.js (index):104
GET http://localhost:8080/components/services/candidate-services.js (index):109
GET http://localhost:8080/components/auth/User.js (index):106
GET http://localhost:8080/app/routes.js (index):105
GET http://localhost:8080/components/directives/napi-ck-editor.js (index):108
GET http://localhost:8080/components/auth/user-service.js (index):107
GET http://localhost:8080/components/services/http-helper.js (index):110
GET http://localhost:8080/components/services/menu-services.js 404 (Not Found)
Parece que grunt build no puede encontrar mis archivos de script ubicados dentro de las secciones de inyección de mi página index.html. Si vuelvo a copiar el archivo index.html original que creó el generador y copio todo el código por encima de la sección de "Google Analytics", entonces funciona bien. No entiendo por qué no funciona, ya que no parece haber ninguna diferencia real en el código. La página no muestra ni una sola línea diferente. Lo único que pensé que podría estar causando el problema es que los finales de línea podrían estar cambiando cuando lo hago commit en git y luego tiene problemas. Honestamente, estoy en la oscuridad con esto. Publiqué esta pregunta en un par de foros diferentes, así que estoy cansado de volver a escribirla... así que si quieres leer mi publicación en GitHub (enlace arriba), podría estar mejor redactada.
Gracias por la ayuda.
Actualizar :
Lo siento, debería haber adjuntado mi archivo grunt para que pudiera ser leído y observado que hay un grunt.registerTask llamado "build." No lo adjunté porque realmente no lo he cambiado del predeterminado hecho por angular-fullstack y pensé que otros podrían simplemente verlo como referencia... pero adjuntarlo es más simple y mejor:
'use strict';
module.exports = function (grunt) {
// Configurable paths for the application
var appConfig = {
app: require('./bower.json').appPath || 'client',
dist: 'src/main/webapp'
};
// Load grunt tasks automatically, when needed
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn',
protractor: 'grunt-protractor-runner',
injector: 'grunt-asset-injector'
});
// require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
pkg: grunt.file.readJSON('package.json'),
yeoman: {
// configurable paths
client: require('./bower.json').appPath || 'client',
dist: 'src/main/webapp'
},
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
injectJS: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.js',
'!<%= yeoman.client %>/{app,components}/**/*.spec.js',
'!<%= yeoman.client %>/{app,components}/**/*.mock.js',
'!<%= yeoman.client %>/app/app.js'],
tasks: ['injector:scripts']
},
injectCss: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.css'
],
tasks: ['injector:css']
},
jsTest: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.spec.js',
'<%= yeoman.client %>/{app,components}/**/*.mock.js'
],
tasks: ['newer:jshint:all', 'karma']
},
injectSass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['injector:sass']
},
sass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
files: [
'{.tmp,<%= yeoman.client %>}/{app,components}/**/*.css',
'{.tmp,<%= yeoman.client %>}/{app,components}/**/*.html',
'{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',
'!{.tmp,<%= yeoman.client %>}{app,components}/**/*.spec.js',
'!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js',
'<%= yeoman.client %>/assets/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}'
],
options: {
livereload: true
}
}
},
// 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: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/client/bower_components',
connect.static('./client/bower_components')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/client/bower_components',
connect.static('./client/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: '<%= yeoman.client %>/.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'<%= yeoman.client %>/{app,components}/**/*.js',
'!<%= yeoman.client %>/{app,components}/**/*.spec.js',
'!<%= yeoman.client %>/{app,components}/**/*.mock.js'
],
test: {
src: [
'<%= yeoman.client %>/{app,components}/**/*.spec.js',
'<%= yeoman.client %>/{app,components}/**/*.mock.js'
]
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*',
'!<%= yeoman.dist %>/.openshift',
'!<%= yeoman.dist %>/Procfile'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/',
src: '{,*/}*.css',
dest: '.tmp/'
}]
}
},
// Automatically inject Bower components into the app
wiredep: {
target: {
src: '<%= yeoman.client %>/index.html',
ignorePath: '<%= yeoman.client %>/',
exclude: [/bootstrap-sass-official/, /bootstrap.js/, '/json3/', '/es5-shim/', /bootstrap.css/, /font-awesome.css/ ]
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/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.client %>/index.html'],
options: {
dest: '<%= yeoman.dist %>/public',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
cssmin: {
options: {
root: 'client'
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.client %>/assets/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/public/assets/images'
}]
}
},
// htmlmin: {
// dist: {
// options: {
// collapseWhitespace: true,
// conservativeCollapse: true,
// collapseBooleanAttributes: true,
// removeCommentsFromCDATA: true,
// removeOptionalTags: true
// },
// files: [{
// expand: true,
// cwd: '<%= yeoman.dist %>',
// src: ['*.html', 'app/**/*.html'],
// dest: '<%= yeoman.dist %>'
// }]
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= yeoman.dist %>/scripts/scripts.js': [
// '<%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.client %>/assets/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/public/assets/images'
}]
}
},
// Allow the use of non-minsafe AngularJS files. Automatically makes it
// minsafe compatible so Uglify does not destroy the ng references
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat',
src: '*/**.js',
dest: '.tmp/concat'
}]
}
},
// Package all the html partials into a single javascript payload
ngtemplates: {
options: {
// This should be the name of your apps angular module
module: 'napiRest',
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
usemin: 'app/app.js'
},
main: {
cwd: '<%= yeoman.client %>',
src: ['{app,components}/**/*.html'],
dest: '.tmp/templates.js'
},
tmp: {
cwd: '.tmp',
src: ['{app,components}/**/*.html'],
dest: '.tmp/tmp-templates.js'
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/public/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/public',
src: [
'*.{ico,png,txt}',
'.htaccess',
'bower_components/**/*',
'assets/images/{,*/}*.{webp}',
'assets/fonts/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/public/assets/images',
src: ['generated/*']
}, {
expand: true,
dest: '<%= yeoman.dist %>',
src: [
'package.json'
]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.client %>',
dest: '.tmp/',
src: ['{app,components}/**/*.css']
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'sass'
],
test: [
'sass'
],
dist: [
'sass',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
mochaTest: {
options: {
reporter: 'spec'
},
src: ['server/**/*.spec.js']
},
protractor: {
options: {
configFile: 'protractor.conf.js'
},
chrome: {
options: {
args: {
browser: 'chrome'
}
}
}
},
// Compiles Sass to CSS
sass: {
server: {
options: {
loadPath: [
'<%= yeoman.client %>/bower_components',
'<%= yeoman.client %>/app',
'<%= yeoman.client %>/components'
],
compass: false
},
files: {
'.tmp/app/app.css' : '<%= yeoman.client %>/app/app.scss'
}
}
},
injector: {
options: {
},
// Inject application script files into index.html (doesn't include bower)
scripts: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '<script src="' + filePath + '"></script>';
},
starttag: '<!-- injector:js -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
['{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',
'!{.tmp,<%= yeoman.client %>}/app/app.js',
'!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',
'!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']
]
}
},
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '@import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '<link rel="stylesheet" href="' + filePath + '">';
},
starttag: '<!-- injector:css -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
'<%= yeoman.client %>/{app,components}/**/*.css'
]
}
}
}
});
// Used for delaying livereload until after server has restarted
grunt.registerTask('wait', function () {
grunt.log.ok('Waiting for server reload...');
var done = this.async();
setTimeout(function () {
grunt.log.writeln('Done waiting!');
done();
}, 3000);
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'wait', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'connect:livereload',
'wait',
'watch'
]);
});
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
grunt.registerTask('test', function(target) {
if (target === 'client') {
return grunt.task.run([
'clean:server',
'injector:sass',
'concurrent:test',
'injector',
'autoprefixer',
'karma'
]);
}
else if (target === 'e2e') {
return grunt.task.run([
'clean:server',
'injector:sass',
'concurrent:test',
'injector',
'wiredep',
'autoprefixer',
'connect:test',
'protractor'
]);
}
else grunt.task.run([
'test:client'
]);
});
grunt.registerTask('build', [
'clean:dist',
'injector:sass',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
Respuesta #1
Me he encontrado con exactamente el mismo problema aquí. Después de horas de comparación archivo por archivo, finalmente lo he solucionado. Así que pensé en compartir lo que me ha funcionado.
Estoy trabajando en Windows, y simplemente cambiar el final de línea a estilo Unix para "index.html" en mi editor de texto (por cierto, estoy usando Sublime Text) resuelve el problema. Parece que el final de línea de "Windows" hace que el script tenga errores.
Espero que eso ayude.
Meg4mi
Respuesta #2
Es debido a los finales de línea de grunt-injector. Consulta este problema.
Para evitar eso, podrías configurar grunt injector para que funcione con los finales de línea predeterminados de grunt:
injector: {
options: {
lineEnding: grunt.util.linefeed
},
...
}
Haciendo eso, tendrás que configurar tu ajuste de finales de línea de Git en caso de que trabajes en diferentes plataformas. Suponiendo que estás en Windows y obtienes un archivo desde Linux, después del proceso de inyección obtendrás un archivo mixto de LF y CR/LF (LF en todo el archivo HTML y CR/LF entre las etiquetas <!-- injector:js -->) y el plugin grunt-build no funcionará.
Puedes usar este complemento de Sublime Text para ver los finales de línea en tu archivo.