javascript - ERR_ABORTED 404(未找到)- Grunt 构建

Question

所以我正在尝试构建一个 Grunt 运行程序并从 dist 文件夹运行我的项目。

这是我的 Gruntfile.js 代码。

'use strict';

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'
  }); 
  // Define the configuration for all the tasks
  grunt.initConfig({

    sass: {
        dist: {
            files: {
                'css/styles.css': 'css/styles.scss'
            }
        }
    },
    watch: {
        files: 'css/*.scss',
        tasks: ['sass']
    },
    browserSync: {
        dev: {
            bsFiles: {
                src : [
                    'css/*.css',
                    '*.html',
                    'js/*.js'
                ]
            },
            options: {
                watchTask: true,
                server: {
                    baseDir: "./"
                }
            }
        }
    },
    copy: {
        html: {
            files: [
            {
                //for html
                expand: true,
                dot: true,
                cwd: './',
                src: ['*.html'],
                dest: 'dist'
            }]                
        },
        fonts: {
            files: [
            {
                //for font-awesome
                expand: true,
                dot: true,
                cwd: 'node_modules/font-awesome',
                src: ['fonts/*.*'],
                dest: 'dist'
            }]
        }
    },
    clean: {
        build: {
            src: [ 'dist/']
        }
    },
    imagemin: {
        dynamic: {
            files: [{
                expand: true,                  // Enable dynamic expansion
                cwd: './',                   // Src matches are relative to this path
                src: ['img/*.{png,jpg,gif}'],   // Actual patterns to match
                dest: 'dist/'                  // Destination path prefix
            }]
        }
    },
    useminPrepare: {
        foo: {
            dest: 'dist',
            src: ['contactus.html','aboutus.html','index.html']
        },
        options: {
            flow: {
                steps: {
                    css: ['cssmin'],
                    js:['uglify']
                },
                post: {
                    css: [{
                        name: 'cssmin',
                        createConfig: function (context, block) {
                        var generated = context.options.generated;
                            generated.options = {
                                keepSpecialComments: 0, rebase: false
                            };
                        }       
                    }]
                }
            }
        }
    },

    // Concat
    concat: {
        options: {
            separator: ';'
        },

        // dist configuration is provided by useminPrepare
        dist: {}
    },

    // Uglify
    uglify: {
        // dist configuration is provided by useminPrepare
        dist: {}
    },

    cssmin: {
        dist: {}
    },

    // Filerev
    filerev: {
        options: {
            encoding: 'utf8',
            algorithm: 'md5',
            length: 20
        },

        release: {
        // filerev:release hashes(md5) all assets (images, js and css )
        // in dist directory
            files: [{
                src: [
                    'dist/js/*.js',
                    'dist/css/*.css',
                ]
            }]
        }
    },

    // Usemin
    // Replaces all assets with their revved version in html and css files.
    // options.assetDirs contains the directories for finding the assets
    // according to their relative paths
    usemin: {
        html: ['dist/contactus.html','dist/aboutus.html','dist/index.html'],
        options: {
            assetsDirs: ['dist', 'dist/css','dist/js']
        }
    },

    htmlmin: {                                         // Task
        dist: {                                        // Target
            options: {                                 // Target options
                collapseWhitespace: true
            },
            files: {                                   // Dictionary of files
                'dist/index.html': 'dist/index.html',  // 'destination': 'source'
                'dist/contactus.html': 'dist/contactus.html',
                'dist/aboutus.html': 'dist/aboutus.html',
            }
        }
    }
  });

  grunt.registerTask('css', ['sass']);
  grunt.registerTask('default', ['browserSync', 'watch']);
  grunt.registerTask('build', [
    'clean',
    'copy',
    'imagemin',
    'useminPrepare',
    'concat',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
]);

}

在终端中，我输入 grunt build 并得到它

Running "clean:build" (clean) task
>> 1 path cleaned.

Running "copy:html" (copy) task
Copied 3 files

Running "copy:fonts" (copy) task
Copied 6 files

Running "imagemin:dynamic" (imagemin) task
Minified 4 images (saved 21.9 kB - 17.5%)

Running "useminPrepare:foo" (useminPrepare) task
Warning: Different sources attempting to write to the same destination:
 {
    "dest": "dist/js/main.js",
    "src": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js",
        "js/scripts.js"
    ]
}
  {
    "files": []
} Use --force to continue.

Aborted due to warnings.


Execution Time (2019-10-20 20:28:56 UTC+3)
loading tasks                    11ms  ▇▇ 1%
clean:build                      16ms  ▇▇ 1%
copy:html                        35ms  ▇▇▇▇ 3%
copy:fonts                       30ms  ▇▇▇▇ 3%
loading grunt-contrib-imagemin  332ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 31%
imagemin:dynamic                583ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 54%
loading grunt-usemin             53ms  ▇▇▇▇▇▇ 5%
useminPrepare:foo                12ms  ▇▇ 1%
Total 1.1s

但是当我运行http://localhost:3000/dist/index.html时我在浏览器控制台中得到了这个。

Refused to apply style from 'http://localhost:3000/dist/node_modules/bootstrap/dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.html:1 Refused to apply style from 'http://localhost:3000/dist/node_modules/font-awesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.html:1 Refused to apply style from 'http://localhost:3000/dist/node_modules/bootstrap-social/bootstrap-social.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.html:1 Refused to apply style from 'http://localhost:3000/dist/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.html:326 GET http://localhost:3000/dist/node_modules/jquery/dist/jquery.slim.min.js net::ERR_ABORTED 404 (Not Found)
index.html:327 GET http://localhost:3000/dist/node_modules/popper.js/dist/umd/popper.min.js net::ERR_ABORTED 404 (Not Found)
index.html:328 GET http://localhost:3000/dist/node_modules/bootstrap/dist/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)
index.html:329 GET http://localhost:3000/dist/js/scripts.js net::ERR_ABORTED 404 (Not Found)
index.html:326 GET http://localhost:3000/dist/node_modules/jquery/dist/jquery.slim.min.js net::ERR_ABORTED 404 (Not Found)
index.html:327 GET http://localhost:3000/dist/node_modules/popper.js/dist/umd/popper.min.js net::ERR_ABORTED 404 (Not Found)
index.html:328 GET http://localhost:3000/dist/node_modules/bootstrap/dist/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)
index.html:329 GET http://localhost:3000/dist/js/scripts.js net::ERR_ABORTED 404 (Not Found)

显然，我的node_module js 文件没有正确缩小到dist 文件夹中。我该如何修复该错误？这是我的repo .

如何修复这个恼人的错误？

谢谢，西奥

Answer 1

几天前，当我尝试练习时，我遇到了完全相同的问题。useminprepare 应该只包含index.html，其中usemin 应该处理其他文件。在 gruntfile.js 中按如下方式编辑 useminprepare，然后它就可以工作:

  useminPrepare: {
        foo: {
            dest: 'dist',
            src: ['index.html']
        }