javascript - serve - Gruntfile no funciona cuando se ejecuta el comando grunt build

grunt-cli

Question

Usé yeoman para crear mi estructura usando "yo webapp", excluí todos los extras durante el proceso de instalación a través de npm y descargué manualmente los archivos de arranque.

Estoy tratando de ejecutar el comando "grunt build" que debe tomar todo lo que está en la carpeta de la aplicación (y sus subcarpetas y su subcarpeta, etc.) y crear, compilar, concatenar y minimizar los archivos en una carpeta dist en el directorio principal ( en el mismo nivel que la aplicación), ya que estoy seguro de que cualquiera que haya usado yeoman y gruñido lo sabe.

Sin embargo, por alguna razón no lo haré y he intentado cambiar las rutas predeterminadas, etc, etc. en el archivo de texto para intentar que funcione, pero no funciona correctamente (para ser sincero, dice que no funciona en absoluto Es más apto, aunque dice en el cmd que lo hace).

Completa la tarea de compilación según el cmd ahora (no lo hizo antes, alegando que hubo un problema con la tarea imagemin, pero la modifiqué y funciona ahora (o eso dice)), pero cuando miro en la carpeta dist , solo hay un index.html y un archivo de estilos (que no incluye algunos de los archivos css que debería ...).

Aquí está la parte importante de mi estructura de carpetas:

Site
├───.tmp
│ ├───spec
│ └───styles
├───app
├───fonts
├───images
│ ├───home
│ ├───payments
│ └───profile
├───scripts
│ ├───JS
│ ├───PHP
└───styles

La carpeta .tmp se crea automáticamente por algún motivo, supongo que para ayudar a gruñir con algo, ya que se crea cuando guardo archivos en la carpeta de la aplicación y Grunt está mirando.

Todo lo que quiero es simple:

• Para poder ejecutar "grunt build"
• Para luego tener grunt ir a través de todas las carpetas y archivos
• Para concatenar, modificar, recrear, mover y crear archivos como se espera (si ha usado yeoman y gruñir juntos, sabrá a qué me refiero y espero, más acertadamente)
• Para salir en la carpeta dist

Si ayuda, los tipos de archivo en las carpetas son como usted esperaría, la carpeta de fuentes tiene [EOT, TTF, OTF, WOFF, SVG], las imágenes y sus subcarpetas usan [PNG, JPEG, GIF], los scripts tienen [JS, PHP] en ​​sí mismo y sus subcarpetas y estilos tiene [SASS, SCSS, CSS], pero obviamente es solo el CSS que me importa moverme hacia dist.

Eso puede haber complicado su mente, pero espero que sepa lo que espero después de trabajar con yeoman y gruñir ante usted y pueda ayudarme a realizar las tareas y el movimiento.

Aquí está mi gruntfile tal como está:

// Generated on 2015-11-17 using
// generator-webapp 1.1.0
''use strict'';
// # Globbing
// for performance reasons we''re only matching one level down:
// ''test/spec/{,*/}*.js''
// If you want to recursively match all subfolders, use:
// ''test/spec/**/*.js''
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require(''time-grunt'')(grunt);
// Automatically load required grunt tasks
require(''jit-grunt'')(grunt, {
useminPrepare: ''grunt-usemin''
});
// Configurable paths
var config = {
app: ''app'',
dist: ''dist''
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: [''bower.json''],
tasks: [''wiredep'']
},
babel: {
files: [''<%= config.app %>/scripts/{,*/}*.js''],
tasks: [''babel:dist'']
},
babelTest: {
files: [''test/spec/{,*/}*.js''],
tasks: [''babel:test'', ''test:watch'']
},
gruntfile: {
files: [''Gruntfile.js'']
},
styles: {
files: [''<%= config.app %>/styles/{,*/}*.css''],
tasks: [''newer:copy:styles'', ''postcss'']
}
},
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''''
}
},
livereload: {
options: {
files: [
''<%= config.app %>/{,*/}*.html'',
''.tmp/styles/{,*/}*.css'',
''<%= config.app %>/images/{,*/}*'',
''.tmp/scripts/{,*/}*.js''
],
port: 9000,
server: {
baseDir: [''.tmp'', config.app],
routes: {
''/bower_components'': ''./bower_components''
}
}
}
},
test: {
options: {
port: 9001,
open: false,
logLevel: ''silent'',
host: ''localhost'',
server: {
baseDir: [''.tmp'', ''./test'', config.app],
routes: {
''/bower_components'': ''./bower_components''
}
}
}
},
dist: {
options: {
background: false,
server: ''<%= config.dist %>''
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
''.tmp'',
''<%= config.dist %>/*'',
''!<%= config.dist %>/.git*''
]
}]
},
server: ''.tmp''
},
// Make sure code styles are up to par and there are no obvious mistakes
eslint: {
target: [
''Gruntfile.js'',
''<%= config.app %>/scripts/{,*/}*.js'',
''!<%= config.app %>/scripts/vendor/*'',
''test/spec/{,*/}*.js''
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: [''http://<%= browserSync.test.options.host %>:<%= browserSync.test.options.port %>/index.html'']
}
}
},
// Compiles ES6 with Babel
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
expand: true,
cwd: ''<%= config.app %>/scripts/*'',
src: ''{,*/}*.js'',
dest: ''.tmp/scripts'',
ext: ''.js''
}]
},
test: {
files: [{
expand: true,
cwd: ''test/spec'',
src: ''{,*/}*.js'',
dest: ''.tmp/spec'',
ext: ''.js''
}]
}
},
postcss: {
options: {
map: true,
processors: [
// Add vendor prefixed styles
require(''autoprefixer'')({
browsers: [''> 1%'', ''last 2 versions'', ''Firefox ESR'']
})
]
},
dist: {
files: [{
expand: true,
cwd: ''.tmp/styles/'',
src: ''{,*/}*.css'',
dest: ''.tmp/styles/''
}]
}
},
// Automatically inject Bower components into the HTML file
wiredep: {
app: {
src: [''<%= config.app %>/index.html''],
ignorePath: /^(/././/)*/././
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
''<%= config.dist %>/scripts/{,*/}*.js'',
''<%= config.dist %>/styles/{,*/}*.css'',
''<%= config.dist %>/images/{,*/}*.*'',
''<%= config.dist %>/styles/fonts/{,*/}*.*'',
''<%= config.dist %>/*.{ico,png}''
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: ''<%= config.dist %>''
},
html: ''<%= config.app %>/index.html''
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
''<%= config.dist %>'',
''<%= config.dist %>/images'',
''<%= config.dist %>/styles''
]
},
html: [''<%= config.dist %>/{,*/}*.html''],
css: [''<%= config.dist %>/styles/{,*/}*.css'']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: ''<%= config.app %>/images/*'',
src: ''{,*/}*.*'',
dest: ''<%= config.dist %>/images''
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: ''<%= config.app %>/images'',
src: ''{,*/}*.svg'',
dest: ''<%= config.dist %>/images''
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
// true would impact styles with attribute selectors
removeRedundantAttributes: false,
useShortDoctype: true
},
files: [{
expand: true,
cwd: ''<%= config.dist %>'',
src: ''{,*/}*.html'',
dest: ''<%= config.dist %>''
}]
}
},
cssmin: {
dist: {
files: {
''<%= config.dist %>/styles/main.css'': [
''.tmp/styles/{,*/}*.css'',
''<%= config.app %>/styles/{,*/}*.css''
]
}
}
},
uglify: {
dist: {
files: {
''<%= config.dist %>/scripts/scripts.js'': [
''<%= config.dist %>/scripts/scripts.js''
]
}
}
},
concat: {
dist: {}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= config.app %>'',
dest: ''<%= config.dist %>'',
src: [
''*.{ico,png,txt}'',
''images/{,*/}*.webp'',
''{,*/}*.html'',
''styles/fonts/{,*/}*.*''
]
}]
},
styles: {
expand: true,
dot: true,
cwd: ''<%= config.app %>/styles'',
dest: ''.tmp/styles/'',
src: ''{,*/}*.css''
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
''babel:dist'',
''copy:styles''
],
test: [
''babel'',
''copy:styles''
],
dist: [
''babel'',
''copy:styles'',
''imagemin'',
''svgmin''
]
}
});
grunt.registerTask(''serve'', ''start the server and preview your app'', function (target) {
if (target === ''dist'') {
return grunt.task.run([''build'', ''browserSync:dist'']);
}
grunt.task.run([
''clean:server'',
''wiredep'',
''concurrent:server'',
''postcss'',
''browserSync:livereload'',
''watch''
]);
});
grunt.registerTask(''server'', function (target) {
grunt.log.warn(''The `server` task has been deprecated. Use `grunt serve` to start a server.'');
grunt.task.run([target ? (''serve:'' + target) : ''serve'']);
});
grunt.registerTask(''test'', function (target) {
if (target !== ''watch'') {
grunt.task.run([
''clean:server'',
''concurrent:test'',
''postcss''
]);
}
grunt.task.run([
''browserSync:test'',
''mocha''
]);
});
grunt.registerTask(''build'', [
''clean:dist'',
''wiredep'',
''useminPrepare'',
''concurrent:dist'',
''postcss'',
''concat'',
''cssmin'',
''uglify'',
''copy:dist'',
''filerev'',
''usemin'',
''htmlmin''
]);
grunt.registerTask(''default'', [
''newer:eslint'',
''test'',
''build''
]);
};

Tomaría capturas de pantalla para mostrarle el problema, pero como dije, cuando ejecuto "grunt build", pasa de acuerdo con el CMD pero no hace lo que se espera, como expliqué.

Si necesita alguna aclaración, hágamelo saber.

Aclamaciones,

-- DAKOTA DEL SUR

Answer 1

Nunca dijiste si una aplicación web limpia funcionaba para ti. Como ya ha intentado volver a instalar yeoman, etc., y ha actualizado los módulos npm, intentaría generar un nuevo proyecto de aplicación web. Y sin tocarlo, ejecute grunt build para ver qué pasa.

yo webapp
bower install
grunt build

Si no funciona, publique el error que está recibiendo. Si funciona, copie los archivos / carpetas de su aplicación actual en el nuevo proyecto y vuelva a intentarlo.