Я использую Grunt для запуска веб-приложения, состоящего из 3 html-страниц - aboutus.html
, index.html
и contactus.html
.
Я использую команду grunt build
для создания копии этихфайлы в другой папке с некоторыми грубыми изменениями, такими как минимизация 'js' и 'css'.Только на главной странице index.html
- ссылки js и css не уменьшаются для ссылки на новый файл js и css, который создается при запуске grunt build
.
JS и ссылки CSS в index.html
оригинал:
<!-- Bootstrap CSS -->
<!-- build:css css/main.css-->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
Они не конвертируются.aboutus.html
имеет те же самые точные ссылки, указанные таким же образом.Но после выполнения grunt build
эти строки в новой копии изменяются следующим образом:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/main.a92351378a85b6243a24.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="js/main.0241dcdce9d2407f69f1.js">
Ниже приведены все мои Gruntfile.js
.с помощью Grunt я планирую переместить все мои файлы в моей текущей папке в папку с именем «dist», где «dist» - это папка в моей текущей папке.
'use strict';
module.exports = function (grunt) {
require('time-grunt')(grunt);
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
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/index.html','dist/contactus.html','dist/aboutus.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'
]);
}
Пожалуйста, дайте мне знать, еслиМне нужно больше информации, чтобы понять проблему.