我试图将Gruntfile.js设置为如下所示，但是当我运行我的构建任务时，我的dist / scripts / main.css仍为空，我得到以下错误：
PS D:\programming\web\grunt-portfolio> grunt build
Running "clean:build" (clean) task
>> 0 paths cleaned.
Running "jshint:all" (jshint) task
√ No problems
Running "useminPrepare:html" (useminPrepare) task
Configuration changed for concat, uglify, cssmin
Running "concat:dist" (concat) task
Running "concat:generated" (concat) task
Running "cssmin:dist" (cssmin) task
>> No files created.
Running "cssmin:generated" (cssmin) task
>> TypeError: Cannot read property '0' of null
Warning: CSS minification failed at .tmp/concat/styles/main.css. Use --force to continue.
Aborted due to warnings.
结果：在dist文件夹里面我有脚本和样式都有main.js＆amp; main.css带有filerev标记但main.css为空，而main.js有其内容。
这是我的Gruntfile.js：
'use strict';
module.exports = function (grunt) {
// Define the configuration for all the tasks
// 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({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/src/{,*/}*.js'
]
}
},
useminPrepare: {
html: 'app/index.html',
options: {
dest: 'dist'
}
},
// 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/scripts/*.js',
'dist/styles/*.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/*.html'],
css: ['.tmp/styles/*.css'],
options: {
assetsDirs: ['dist', 'dist/styles']
}
},
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!src/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'lib/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'fonts/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
watch: {
copy: {
files: [ 'app/**', '!app/**/*.css', '!app/**/*.js'],
tasks: [ 'build' ]
},
scripts: {
files: ['app/src/**.js'],
tasks:[ 'build']
},
styles: {
files: ['app/styles/style.css'],
tasks:['build']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'app/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
dist: {
options: {
open: true,
base:{
path: 'dist',
options: {
index: 'index.html',
maxAge: 300000
}
}
}
}
},
clean: {
build: {
src: [ 'dist/']
}
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'copy',
'filerev',
'usemin'
]);
grunt.registerTask('serve',['build','connect:dist','watch']);
grunt.registerTask('default',['build']);
};
我试图单独运行构建任务中的所有内容，然后发现问题出现在'cssmin'中也注意到'useminPrepare'我得到一个弹出警报，说'队列溢出'。
最后：package.json：
{
"name": "app",
"private": true,
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-filerev": "^2.3.1",
"grunt-usemin": "^3.1.1",
"jit-grunt": "^0.10.0",
"jshint-stylish": "^2.2.1",
"time-grunt": "^1.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}
如果有帮助的话，这里是grunt.log：
Initializing
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ build, default, serve
Running tasks: build:dist
Running "build:dist" (build) task
Loading "grunt-contrib-clean" plugin
Registering "D:\programming\web\grunt-portfolio\node_modules\grunt-contrib-clean\tasks" tasks.
Loading "clean.js" tasks...OK
+ clean
Running "clean" task
Running "clean:build" (clean) task
Verifying property clean.build exists in config...OK
Files: [no src]
Options: force=false, no-write=false
>> 0 paths cleaned.
Loading "grunt-contrib-jshint" plugin
Registering "D:\programming\web\grunt-portfolio\node_modules\grunt-contrib-jshint\tasks" tasks.
Loading "jshint.js" tasks...OK
+ jshint
Running "jshint" task
Running "jshint:all" (jshint) task
Verifying property jshint.all exists in config...OK
Files: Gruntfile.js, app/src/app.module.js, app/src/public/public.module.js, app/src/public/public.routes.js, app/src/services/awards.service.js, app/src/services/projects.service.js
Options: force=false, reporter={}, reporterOutputRelative, jshintrc=".jshintrc"
 No problems
Loading "grunt-usemin" plugin
Registering "D:\programming\web\grunt-portfolio\node_modules\grunt-usemin\tasks" tasks.
Loading "usemin.js" tasks...OK
+ usemin, useminPrepare
Running "useminPrepare" task
Running "useminPrepare:html" (useminPrepare) task
Verifying property useminPrepare.html exists in config...OK
Files: app/index.html -> html
Options: root="app", dest="dist"
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Configuration is now:
concat:
{ options: { separator: [32m';'[39m },
dist: {},
generated:
{ files:
[ { dest: [32m'.tmp\\concat\\styles\\main.css'[39m,
src:
[ [32m'app\\lib\\bootstrap\\dist\\css\\bootstrap.min.css'[39m,
[32m'app\\lib\\bootstrap\\dist\\css\\bootstrap-theme.min.css'[39m,
[32m'app\\fonts\\Shrikhand\\Shrikhand-Regular.ttf'[39m,
[32m'app\\fonts\\spac3-tech\\Spac3-tech.ttf'[39m,
[32m'app\\fonts\\digital-tech\\digital-tech.otf'[39m,
[32m'app\\fonts\\gtek-tech\\gtek-tech.ttf'[39m,
[32m'app\\fonts\\great-vibes\\great-vibes.ttf'[39m,
[32m'app\\fonts\\font-awesome\\css\\font-awesome.min.css'[39m,
[32m'app\\lib\\lightbox\\dist\\css\\lightbox.min.css'[39m,
[32m'app\\styles\\style.css'[39m ] },
{ dest: [32m'.tmp\\concat\\scripts\\main.js'[39m,
src:
[ [32m'app\\lib\\jquery\\dist\\jquery.min.js'[39m,
[32m'app\\lib\\bootstrap\\dist\\js\\bootstrap.min.js'[39m,
[32m'app\\lib\\lightbox\\dist\\js\\lightbox.min.js'[39m,
[32m'app\\lib\\emailJs\\email.min.js'[39m,
[32m'app\\lib\\angular\\angular.min.js'[39m,
[32m'app\\lib\\angular-ui-router\\release\\angular-ui-router.min.js'[39m,
[32m'app\\lib\\angular-sanitize\\angular-sanitize.min.js'[39m,
[32m'app\\lib\\angular-animate\\angular-animate.min.js'[39m,
[32m'app\\lib\\angular-bootstrap\\ui-bootstrap-tpls.min.js'[39m,
[32m'app\\src\\app.module.js'[39m,
[32m'app\\src\\public\\public.module.js'[39m,
[32m'app\\src\\public\\public.routes.js'[39m,
[32m'app\\src\\services\\projects.service.js'[39m,
[32m'app\\src\\services\\awards.service.js'[39m,
[32m'app\\src\\public\\home\\home.controller.js'[39m,
[32m'app\\src\\public\\about\\about.controller.js'[39m,
[32m'app\\src\\public\\projects\\projects.controller.js'[39m,
[32m'app\\src\\public\\contact\\contact.controller.js'[39m,
[32m'app\\src\\public\\awards\\awards.controller.js'[39m ] } ] } }
uglify:
{ dist: {},
generated:
{ files:
[ { dest: [32m'dist\\scripts\\main.js'[39m,
src: [ [32m'.tmp\\concat\\scripts\\main.js'[39m ] } ] } }
cssmin:
{ dist: {},
generated:
{ files:
[ { dest: [32m'dist\\styles\\main.css'[39m,
src: [ [32m'.tmp\\concat\\styles\\main.css'[39m ] } ] } }
Loading "grunt-contrib-concat" plugin
Registering "D:\programming\web\grunt-portfolio\node_modules\grunt-contrib-concat\tasks" tasks.
Loading "concat.js" tasks...OK
+ concat
Running "concat" task
Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
File: [no files]
Options: separator=";", banner="", footer="", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"
Running "concat:generated" (concat) task
Verifying property concat.generated exists in config...OK
Files: app/lib/bootstrap/dist/css/bootstrap.min.css, app/lib/bootstrap/dist/css/bootstrap-theme.min.css, app/fonts/Shrikhand/Shrikhand-Regular.ttf, app/fonts/spac3-tech/Spac3-tech.ttf, app/fonts/digital-tech/digital-tech.otf, app/fonts/gtek-tech/gtek-tech.ttf, app/fonts/great-vibes/great-vibes.ttf, app/fonts/font-awesome/css/font-awesome.min.css, app/lib/lightbox/dist/css/lightbox.min.css, app/styles/style.css -> .tmp\concat\styles\main.css
Files: app/lib/jquery/dist/jquery.min.js, app/lib/bootstrap/dist/js/bootstrap.min.js, app/lib/lightbox/dist/js/lightbox.min.js, app/lib/emailJs/email.min.js, app/lib/angular/angular.min.js, app/lib/angular-ui-router/release/angular-ui-router.min.js, app/lib/angular-sanitize/angular-sanitize.min.js, app/lib/angular-animate/angular-animate.min.js, app/lib/angular-bootstrap/ui-bootstrap-tpls.min.js, app/src/app.module.js, app/src/public/public.module.js, app/src/public/public.routes.js, app/src/services/projects.service.js, app/src/services/awards.service.js, app/src/public/home/home.controller.js, app/src/public/about/about.controller.js, app/src/public/projects/projects.controller.js, app/src/public/contact/contact.controller.js, app/src/public/awards/awards.controller.js -> .tmp\concat\scripts\main.js
Options: separator=";", banner="", footer="", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"
Reading app/lib/bootstrap/dist/css/bootstrap.min.css...OK
Reading app/lib/bootstrap/dist/css/bootstrap-theme.min.css...OK
Reading app/fonts/Shrikhand/Shrikhand-Regular.ttf...OK
Reading app/fonts/spac3-tech/Spac3-tech.ttf...OK
Reading app/fonts/digital-tech/digital-tech.otf...OK
Reading app/fonts/gtek-tech/gtek-tech.ttf...OK
Reading app/fonts/great-vibes/great-vibes.ttf...OK
Reading app/fonts/font-awesome/css/font-awesome.min.css...OK
Reading app/lib/lightbox/dist/css/lightbox.min.css...OK
Reading app/styles/style.css...OK
Writing .tmp\concat\styles\main.css...OK
File .tmp\concat\styles\main.css created.Reading app/lib/jquery/dist/jquery.min.js...OK
Reading app/lib/bootstrap/dist/js/bootstrap.min.js...OK
Reading app/lib/lightbox/dist/js/lightbox.min.js...OK
Reading app/lib/emailJs/email.min.js...OK
Reading app/lib/angular/angular.min.js...OK
Reading app/lib/angular-ui-router/release/angular-ui-router.min.js...OK
Reading app/lib/angular-sanitize/angular-sanitize.min.js...OK
Reading app/lib/angular-animate/angular-animate.min.js...OK
Reading app/lib/angular-bootstrap/ui-bootstrap-tpls.min.js...OK
Reading app/src/app.module.js...OK
Reading app/src/public/public.module.js...OK
Reading app/src/public/public.routes.js...OK
Reading app/src/services/projects.service.js...OK
Reading app/src/services/awards.service.js...OK
Reading app/src/public/home/home.controller.js...OK
Reading app/src/public/about/about.controller.js...OK
Reading app/src/public/projects/projects.controller.js...OK
Reading app/src/public/contact/contact.controller.js...OK
Reading app/src/public/awards/awards.controller.js...OK
Writing .tmp\concat\scripts\main.js...OK
File .tmp\concat\scripts\main.js created.
Loading "grunt-contrib-cssmin" plugin
Registering "D:\programming\web\grunt-portfolio\node_modules\grunt-contrib-cssmin\tasks" tasks.
Loading "cssmin.js" tasks...OK
+ cssmin
Running "cssmin" task
Running "cssmin:dist" (cssmin) task
Verifying property cssmin.dist exists in config...OK
File: [no files]
>> No files created.
Running "cssmin:generated" (cssmin) task
Verifying property cssmin.generated exists in config...OK
Files: .tmp/concat/styles/main.css -> dist\styles\main.css
Options: rebase=false, report="min", sourceMap=false
>> TypeError: Cannot read property '0' of null
Warning: CSS minification failed at .tmp/concat/styles/main.css. Use --force to continue.
Aborted due to warnings.
Execution Time (2016-12-19 08:33:03 UTC-0)
loading tasks 67ms ÔûêÔûê 5%
loading grunt-contrib-clean 33ms Ôûê 2%
clean:build 0ms 0%
loading grunt-contrib-jshint 172ms ÔûêÔûêÔûêÔûêÔûê 13%
jshint:all 219ms ÔûêÔûêÔûêÔûêÔûêÔûê 16%
loading grunt-usemin 47ms ÔûêÔûê 4%
useminPrepare:html 47ms ÔûêÔûê 4%
loading grunt-contrib-concat 31ms Ôûê 2%
concat:dist 0ms 0%
concat:generated 47ms ÔûêÔûê 4%
loading grunt-contrib-cssmin 156ms ÔûêÔûêÔûêÔûê 12%
cssmin:dist 0ms 0%
cssmin:generated 516ms ÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûêÔûê 39%
Total 1.3s
我的css文件已按要求提供：
html {
font-size: 16px;
}
body {
line-height: 2;
background: #2D2D2D center/100% url('../images/background/gray5.jpg');
background-repeat: repeat-y;
background-size: cover;
}
/*navigation*/
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right: 15px;
margin-left: -15px;
}
.navbar-brand > img {
margin: 0 auto;
margin-bottom: 0;
height: 100%;
width: auto;
min-width: 60px;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a {
color:#FFF;
}
/* .navbar-nav > ul {
margin: 0 auto;
} */
.navbar-nav > li > a {
margin: 0 auto;
}
.navbar-inverse .navbar-nav>li>a {
color: #8EE8CD;
}
.navbar-inverse .navbar-nav {
max-width: 100%;
width: auto;
margin-left: auto;
}
.navbar-inverse {
background: rgb(14, 78, 114);
}
/* Content style*/
.container.content {
margin-top: 100px;
max-width: 90%;
min-height: calc(100vh - 170px);
}
/* Pages headers */
.home h1,
.projects h1,
.about h1,
.contact h1,
.awards h1 {
font-family: 'Spac3-tech';
font-weight: bold;
font-size: 200%;
color:#8ef4ff;
text-align: center;
}
footer {
max-height: 50px;
margin-top: 20px;
text-align: center;
font-size: 0.8em;
width: 100%;
color: white;
background-color: rgb(14, 78, 114);
}
/* Home */
.home {
text-align: center;
color:#FFF;
}
.home h2 {
font-weight: bold;
font-family: 'Spac3-tech';
font-size: 150%;
}
.home #build {
max-width: 100%;
width: 48%;
min-width: 20%;
margin: 0.75em;
}
/* Gallery for projects and awards */
.tab-content .thumbnails img {
transition: all 0.2s ease-in-out;
}
.tab-content:hover .thumbnails img {
opacity: 0.6;
transform: scale(0.90);
}
.tab-content .thumbnails:hover .thumbnail {
opacity: 1;
}
.tab-content .thumbnails img:hover {
transform: scale(1) rotate(2deg);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* nav-tabs for projects and awards */
.nav-tabs {
border-bottom: 2px solid #8EE8CD;
border-radius: 5%;
background-color: rgb(14, 78, 114);
}
.nav-tabs> li> a {
background-color: rgba(0,0,0,0.4);
color: #8EE8CD;
border: 1px dotted #8EE8CD;
border-radius: 50%;
margin: 10px;
width: 100px;
padding: 5px;
}
.nav-tabs>li>a:hover {
color: #FFF;
background-color: #000;
cursor: pointer;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
background-color: #000;
color: #FFF;
border: 1px solid #8EE8CD;
border-bottom-color: transparent;
}
/* Projects & Awards*/
.projects, .awards {
text-align: center;
margin: 0 auto;
}
.projects-content, .awards-content {
margin-right: 15px;
margin: 20px auto;
max-width: 100%;
width: 100%;
height: auto;
}
.projects-content img.thumbnail,
.awards-content img.thumbnail {
margin: 0 auto;
margin-bottom: 0;
width: auto;
max-width: 100%;
}
.projects-content .project-column.well,
.awards-content .award-column.well {
background: #73A6E4;
border-radius: 5%;
}
/* About */
.about img.thumbnail {
width: 100%;
max-width: 100%;
min-width: 200px;
display: block;
}
.about .jumbotron {
padding: 0;
border: 5px solid #73A6E4;
}
.about .panel-primary .panel-heading {
background: #73A6E4;
text-align: center;
}
.about .panel-title {
color: #FFF;
}
.about a.accordion-toggle{
text-decoration: none;
}
.about ul.panel-body {
list-style-type: none;
height: 100%;
overflow-y: scroll;
}
.about ul.panel-body li{
width:80%;
margin: 0 auto;
text-align: center;
border-radius: 50%;
}
.about ul.panel-body li:nth-child(1) { /* html */
background-color: rgba(241, 101, 41, 0.8);
}
.about ul.panel-body li:nth-child(2) { /* css */
background-color: rgba(48, 173, 217, 0.8);
}
.about ul.panel-body li:nth-child(3) { /* bootstrap */
background-color: rgba(95, 63, 139, 0.8);
}
.about ul.panel-body li:nth-child(4) { /* js */
background-color: rgba(251, 182, 2, 0.8);
}
.about ul.panel-body li:nth-child(5) { /* jquery */
background-color: rgba(8, 104, 171, 0.8);
}
.about ul.panel-body li:nth-child(6) { /* angular */
background-color: rgba(253, 0, 33, 0.8);
}
.about ul.panel-body li:nth-child(7) { /* processingJs */
background-color:rgba(29, 104, 146, 0.8);
}
.about ul.panel-body li:nth-child(8) { /* github */
background-color: rgba(13, 38, 54, 0.4);
}
.about ul.panel-body li:nth-child(9) { /* nodeJs */
background-color: rgba(140, 200, 75, 0.8);
}
.about ul.panel-body li:nth-child(10) { /* mongoDB */
background-color: rgba(88, 170, 80, 0.8);
}
.about ul.panel-body li:nth-child(11) { /* task runners */
background-color: rgba(251, 169, 25, 0.8);
}
.about p {
margin-left: 0;
font-size: 1.3em;
}
/* Contact */
form {
width: auto;
max-width: 100%;
background: #73A6E4;
padding: 20px 25px;
margin: 50px auto 0 auto;
box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
border-radius: 5%;
}
form > h2 {
color: rgb(28, 31, 78);
font-weight: bold;
margin: 0;
}
form input,
form textarea {
font: inherit;
padding: 3px;
width: 100%;
margin-top: 0;
margin-bottom: 5px;
box-sizing: border-box;
background-color: lightyellow;
}
form button {
margin-top: -50px;
border: 1px solid rgba(0,0,0,0.5);
padding: 5px 20px;
font-size: 14px;
font-weight: bold;
background: #3072AB;
color: white;
}
form label {
color: #FFF;
font-size: 14px;
margin-bottom: 1px;
display: block;
}
/************* *************
********* Media Queries *********
****************************************/
@media (min-width: 768px) and (max-width: 1824px) and (orientation : portrait) {
/*navigation*/
.navbar-brand > img {
width: 1.5em;
height: 100%;
max-width: 100%;
min-width: 60px;
position: absolute;
left: 0;
}
ul.navbar-nav {
list-style-type: none;
text-align: center;
float: none;
}
ul.navbar-nav > li {
margin: 0 auto;
max-width: 100;
width: 17%;
display: inline-block;
}
ul.navbar-nav > li:first-child {
margin-left: 10%;
}
.container.content {
width: auto;
max-width: 100%;
padding: 10px;
}
/* Pages headers */
.home h1,
.projects h1,
.about h1,
.contact h1,
.awards h1 {
font-size: 3.5em;
}
/* Home */
.home #build {
min-width: 25%;
width: 40%;
max-width: 100%;
margin: 2em;
}
.home h2 {
font-size: 2.7em;
}
.home p {
font-size: 1.9em;
}
}
@media (min-width: 768px) and (max-width: 1824px) and (orientation : landscape) {
.navbar-brand > img {
width: auto;
height: 100%;
max-width: 100%;
min-width: 60px;
position: absolute;
left: 0;
}
ul.navbar-nav {
list-style-type: none;
text-align: center;
float: none;
}
ul.navbar-nav > li {
margin: 0 auto;
max-width: 100;
width: 17%;
display: inline-block;
}
ul.navbar-nav > li:first-child {
margin-left: 10%;
}
/* Pages headers */
.home h1,
.projects h1,
.about h1,
.contact h1,
.awards h1 {
font-size: 3.2em;
}
/* Home */
.home #build {
min-width: 25%;
width: 30%;
max-width: 100%;
margin: 2em;
}
.home h2 {
font-size: 2.5em;
}
.home p {
font-size: 1.5em;
}
form {
max-width: 80%;
}
}
@media (min-width: 992px) {
.navbar-brand > img {
width: auto;
height: 100%;
max-width: 100%;
min-width: 60px;
position: absolute;
left: 0;
}
ul.navbar-nav {
list-style-type: none;
text-align: center;
float: none;
}
ul.navbar-nav > li {
margin: 0 auto;
max-width: 100;
width: 17%;
display: inline-block;
}
ul.navbar-nav > li:first-child {
margin-left: 10%;
}
/* Pages headers */
.home h1,
.projects h1,
.about h1,
.contact h1,
.awards h1 {
font-size: 2.8em;
}
/* Home */
.home #build {
min-width: 20%;
width: 25%;
max-width: 100%;
margin: 1.5em;
}
.home h2 {
font-size: 2em;
}
.home p {
font-size: 1.3em;
}
form {
max-width: 70%;
}
}
@media (min-width: 1441px) {
.navbar-brand > img {
width: auto;
height: 100%;
max-width: 100%;
min-width: 60px;
position: absolute;
left: 0;
}
ul.navbar-nav {
list-style-type: none;
text-align: center;
float: none;
}
ul.navbar-nav > li {
margin: 0 auto;
max-width: 100;
width: 17%;
display: inline-block;
}
ul.navbar-nav > li:first-child {
margin-left: 10%;
}
.container.content {
width: auto;
max-width: 90%;
padding: 60px;
}
.home #build {
min-width: 20%;
width: 30%;
max-width: 100%;
margin: 2em;
}
.projects, .awards {
max-width: 150%;
}
.col-xl-3 {
width: 25%;
}
form {
max-width: 60%;
}
}
我在index.html文件中包含：
<!-- build:css styles/main.css -->... css files ...<!-- endbuild --> <!-- build:js scripts/main.js -->... js files ...<!-- endbuild -->
请注意我使用的是bootstrap.min.css，bootstrap-theme.min.css，lightbox.min.css和一些字体。