ERR_ABORTED 404（未找到）- Grunt 构建

Question

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

\n\n

这是我的 Gruntfile.js 代码。

\n\n

\'use strict\';\n\nmodule.exports = function(grunt) {\n  // Time how long tasks take. Can help when optimizing build times\n  require(\'time-grunt\')(grunt);\n\n  // Automatically load required Grunt tasks\n  require(\'jit-grunt\')(grunt, {\n    useminPrepare: \'grunt-usemin\'\n  }); \n  // Define the configuration for all the tasks\n  grunt.initConfig({\n\n    sass: {\n        dist: {\n            files: {\n                \'css/styles.css\': \'css/styles.scss\'\n            }\n        }\n    },\n    watch: {\n        files: \'css/*.scss\',\n        tasks: [\'sass\']\n    },\n    browserSync: {\n        dev: {\n            bsFiles: {\n                src : [\n                    \'css/*.css\',\n                    \'*.html\',\n                    \'js/*.js\'\n                ]\n            },\n            options: {\n                watchTask: true,\n                server: {\n                    baseDir: "./"\n                }\n            }\n        }\n    },\n    copy: {\n        html: {\n            files: [\n            {\n                //for html\n                expand: true,\n                dot: true,\n                cwd: \'./\',\n                src: [\'*.html\'],\n                dest: \'dist\'\n            }]                \n        },\n        fonts: {\n            files: [\n            {\n                //for font-awesome\n                expand: true,\n                dot: true,\n                cwd: \'node_modules/font-awesome\',\n                src: [\'fonts/*.*\'],\n                dest: \'dist\'\n            }]\n        }\n    },\n    clean: {\n        build: {\n            src: [ \'dist/\']\n        }\n    },\n    imagemin: {\n        dynamic: {\n            files: [{\n                expand: true,                  // Enable dynamic expansion\n                cwd: \'./\',                   // Src matches are relative to this path\n                src: [\'img/*.{png,jpg,gif}\'],   // Actual patterns to match\n                dest: \'dist/\'                  // Destination path prefix\n            }]\n        }\n    },\n    useminPrepare: {\n        foo: {\n            dest: \'dist\',\n            src: [\'contactus.html\',\'aboutus.html\',\'index.html\']\n        },\n        options: {\n            flow: {\n                steps: {\n                    css: [\'cssmin\'],\n                    js:[\'uglify\']\n                },\n                post: {\n                    css: [{\n                        name: \'cssmin\',\n                        createConfig: function (context, block) {\n                        var generated = context.options.generated;\n                            generated.options = {\n                                keepSpecialComments: 0, rebase: false\n                            };\n                        }       \n                    }]\n                }\n            }\n        }\n    },\n\n    // Concat\n    concat: {\n        options: {\n            separator: \';\'\n        },\n\n        // dist configuration is provided by useminPrepare\n        dist: {}\n    },\n\n    // Uglify\n    uglify: {\n        // dist configuration is provided by useminPrepare\n        dist: {}\n    },\n\n    cssmin: {\n        dist: {}\n    },\n\n    // Filerev\n    filerev: {\n        options: {\n            encoding: \'utf8\',\n            algorithm: \'md5\',\n            length: 20\n        },\n\n        release: {\n        // filerev:release hashes(md5) all assets (images, js and css )\n        // in dist directory\n            files: [{\n                src: [\n                    \'dist/js/*.js\',\n                    \'dist/css/*.css\',\n                ]\n            }]\n        }\n    },\n\n    // Usemin\n    // Replaces all assets with their revved version in html and css files.\n    // options.assetDirs contains the directories for finding the assets\n    // according to their relative paths\n    usemin: {\n        html: [\'dist/contactus.html\',\'dist/aboutus.html\',\'dist/index.html\'],\n        options: {\n            assetsDirs: [\'dist\', \'dist/css\',\'dist/js\']\n        }\n    },\n\n    htmlmin: {                                         // Task\n        dist: {                                        // Target\n            options: {                                 // Target options\n                collapseWhitespace: true\n            },\n            files: {                                   // Dictionary of files\n                \'dist/index.html\': \'dist/index.html\',  // \'destination\': \'source\'\n                \'dist/contactus.html\': \'dist/contactus.html\',\n                \'dist/aboutus.html\': \'dist/aboutus.html\',\n            }\n        }\n    }\n  });\n\n  grunt.registerTask(\'css\', [\'sass\']);\n  grunt.registerTask(\'default\', [\'browserSync\', \'watch\']);\n  grunt.registerTask(\'build\', [\n    \'clean\',\n    \'copy\',\n    \'imagemin\',\n    \'useminPrepare\',\n    \'concat\',\n    \'cssmin\',\n    \'uglify\',\n    \'filerev\',\n    \'usemin\',\n    \'htmlmin\'\n]);\n\n}\n

\n\n

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

\n\n

Running "clean:build" (clean) task\n>> 1 path cleaned.\n\nRunning "copy:html" (copy) task\nCopied 3 files\n\nRunning "copy:fonts" (copy) task\nCopied 6 files\n\nRunning "imagemin:dynamic" (imagemin) task\nMinified 4 images (saved 21.9 kB - 17.5%)\n\nRunning "useminPrepare:foo" (useminPrepare) task\nWarning: Different sources attempting to write to the same destination:\n {\n    "dest": "dist/js/main.js",\n    "src": [\n        "node_modules/jquery/dist/jquery.min.js",\n        "node_modules/popper.js/dist/umd/popper.min.js",\n        "node_modules/bootstrap/dist/js/bootstrap.min.js",\n        "js/scripts.js"\n    ]\n}\n  {\n    "files": []\n} Use --force to continue.\n\nAborted due to warnings.\n\n\nExecution Time (2019-10-20 20:28:56 UTC+3)\nloading tasks                    11ms  \xe2\x96\x87\xe2\x96\x87 1%\nclean:build                      16ms  \xe2\x96\x87\xe2\x96\x87 1%\ncopy:html                        35ms  \xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87 3%\ncopy:fonts                       30ms  \xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87 3%\nloading grunt-contrib-imagemin  332ms  \xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87 31%\nimagemin:dynamic                583ms  \xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87 54%\nloading grunt-usemin             53ms  \xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87\xe2\x96\x87 5%\nuseminPrepare:foo                12ms  \xe2\x96\x87\xe2\x96\x87 1%\nTotal 1.1s\n

\n\n

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

\n\n

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.\nindex.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.\nindex.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.\nindex.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.\nindex.html:326 GET http://localhost:3000/dist/node_modules/jquery/dist/jquery.slim.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:327 GET http://localhost:3000/dist/node_modules/popper.js/dist/umd/popper.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:328 GET http://localhost:3000/dist/node_modules/bootstrap/dist/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:329 GET http://localhost:3000/dist/js/scripts.js net::ERR_ABORTED 404 (Not Found)\nindex.html:326 GET http://localhost:3000/dist/node_modules/jquery/dist/jquery.slim.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:327 GET http://localhost:3000/dist/node_modules/popper.js/dist/umd/popper.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:328 GET http://localhost:3000/dist/node_modules/bootstrap/dist/js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)\nindex.html:329 GET http://localhost:3000/dist/js/scripts.js net::ERR_ABORTED 404 (Not Found)\n

\n\n

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

\n\n

我该如何解决这个恼人的错误？

\n\n

谢谢，\n西奥

\n

Answer 1

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

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