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.