因此，我试图构建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。
如何解决该烦人的错误？
谢谢， 西奥
答案 0 :(得分：1)
在尝试练习的前几天，我面临着完全相同的问题。 useminprepare应该仅包含index.html，其中usemin应该注意其他文件。 在您的gruntfile.js中编辑useminprepare，如下所示：
useminPrepare: {
foo: {
dest: 'dist',
src: ['index.html']
}