我有一个站点设置，可以在我的工作笔记本电脑、办公室中的所有 Windows 机器上运行，但是当我在我的个人机器上运行“grunt”时，它无法正常工作。我在我的个人计算机上经常使用 browserSync，只是仔细检查了另一个站点，它按应有的方式加载，但由于某种原因，它不适用于该站点。我已经尝试了一切，从并排比较文件，手动将整个文件夹从我的工作机器复制到我的个人机器，甚至复制 node_modules 以防万一。
这是在我的 package.json 文件中：
"grunt-browser-sync": "^2.1.3",
脚步
1- 运行 grunt 2- 所有正常编译的东西 3- 创建文件 4- 去创建浏览器 URL 5- 打开浏览器 6- “无法访问此站点”。
在 Mac 上使用 Node v5.12.0 和 npm 3.8.6 并使用 Grunt 进行编译。
var sites = [
'starter'
];
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
app: {
dirs: {
tmp: '.tmp',
src: 'frontend',
js: '<%= app.dirs.src %>/js',
scss: '<%= app.dirs.src %>/scss/base',
img: '<%= app.dirs.src %>/images',
fonts: '<%= app.dirs.src %>/fonts',
assemble: '<%= app.dirs.src %>/assemble',
data: '<%= app.dirs.js %>/data',
compiled: 'compiled',
}
},
clean: {
build: {
src: ["compiled"]
},
data: {
src: ["<%= app.dirs.assemble %>/data/context"]
}
},
copy: {
dev: {
files: [{
expand: true,
cwd: '<%= app.dirs.fonts %>',
src: ['**/*'],
dest: 'compiled/fonts'
}, {
expand: true,
cwd: '<%= app.dirs.js %>',
src: ['**/*'],
dest: 'compiled/js'
}, {
expand: true,
cwd: '<%= app.dirs.data %>',
src: ['**/*'],
dest: 'compiled/js/data'
}, {
expand: true,
cwd: 'bower_components/bootstrap-sass/assets/fonts/bootstrap',
src: ['**/*'],
dest: 'compiled/fonts/bootstrap'
}, {
expand: true,
cwd: 'bower_components/respond/dest',
src: ['respond.min.js'],
dest: 'compiled/js/compatibility'
}, {
expand: true,
cwd: 'bower_components/selectivizr2',
src: ['selectivizr2.js'],
dest: 'compiled/js/compatibility'
}, {
expand: true,
cwd: 'bower_components/es5-shim',
src: ['es5-shim.min.js', 'es5-sham.min.js'],
dest: 'compiled/js/compatibility'
},{
expand: true,
cwd: '<%= app.dirs.src %>/images_dev',
src: ['**/*'],
dest: 'compiled/images_dev'
}]
},
js: {
files: [{
expand: true,
cwd: '<%= app.dirs.js %>',
src: ['**/*'],
dest: 'compiled/js'
}, ]
},
data: {
files: [{
expand: true,
cwd: '<%= app.dirs.data %>',
src: ['**/*'],
dest: 'compiled/js/data'
}]
},
img: {
files: [{
expand: true,
cwd: '<%= app.dirs.src %>/images',
src: ['**/*'],
dest: 'compiled/images'
}]
}
},
assemble: {
options: {
flatten: true,
assets: 'assets',
production: false,
plugins: ['assemble-collection-context'],
context : { dest: '<%= app.dirs.assemble %>/data/context/' },
partials: ['<%= app.dirs.assemble %>/includes/**/*.hbs', '<%= app.dirs.assemble %>/includes/**/**/*.hbs'],
layoutdir: '<%= app.dirs.assemble %>/layout',
data: ['<%= app.dirs.assemble %>/data/**/*.{json,yml}']
},
account: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/account/*.hbs'],
dest: 'compiled/pages/'
},
main: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/main/*.hbs'],
dest: 'compiled/pages/'
},
miscpages: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/misc-pages/*.hbs'],
dest: 'compiled/pages/'
},
standalone: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/standalone/*.hbs'],
dest: 'compiled/pages/'
},
components: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/components/*.hbs'],
dest: 'compiled/components/'
},
index:{
options:{
layout: 'index.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/index.hbs'],
dest: 'compiled/'
},
guide:{
options:{
layout: 'guide.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/guide/index.hbs'],
dest: 'compiled/guide/'
},
},
sass_directory_import: {
files: {
src: ['<%= app.dirs.src %>/**/_all.scss']
},
},
sass: {
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: ['bower_components/breakpoint-sass/stylesheets', 'bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
files: (function() {
var sassDistFiles = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
sassDistFiles['compiled/dev_css/' + site + '/core.css'] = '<%= app.dirs.src %>/scss/' + site + '/core.scss';
}
return sassDistFiles;
})()
}
},
postcss: {
before: {
options: {
map: false,
processors: [
require('stylelint')(stylelintConfig),
require('postcss-reporter')({
clearMessages: true,
throwError: true
})
],
syntax: require('postcss-scss')
},
src: ['<%= app.dirs.src %>/scss/base/**/*.scss','!<%= app.dirs.src %>/scss/base/_bower.scss', '!<%= app.dirs.src %>/scss/base/_bower.scss', '!<%= app.dirs.src %>/scss/base/_sprite.scss', '!<%= app.dirs.src %>/scss/base/_sprite-2x.scss', '!<%= app.dirs.src %>/scss/base/font-awesome/**/*.scss']
},
after: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
]
}),
]
},
src: ['<%= app.dirs.compiled %>/css/*.css','!<%= app.dirs.compiled %>/css/*.css.map']
}
},
csssplit: (function() {
var cssSplitOptions = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
cssSplitOptions[site] = {
src: ['<%= app.dirs.compiled %>/dev_css/' + site + '/core.css'],
dest: '<%= app.dirs.compiled %>/css/' + site + '/core.css',
options: {
maxSelectors: 3000,
maxPages: 8,
suffix: ''
}
};
}
return cssSplitOptions;
})(),
cssmin: {
target: {
files: (function() {
var cssminTargetFiles = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
cssminTargetFiles['<%= app.dirs.compiled %>/css/' + site + '/core1.css'] = ['<%= app.dirs.compiled %>/css/' + site + '/core1.css'];
cssminTargetFiles['<%= app.dirs.compiled %>/css/' + site + '/core2.css'] = ['<%= app.dirs.compiled %>/css/' + site + '/core2.css'];
}
return cssminTargetFiles;
})()
}
},
watch: {
options: {
spawn: true
},
gruntfile: {
files: 'Gruntfile.js',
options: {
reload: true
}
},
html: {
files: ['<%= app.dirs.assemble %>/**/*.hbs'],
tasks: ['assemble'],
},
image: {
files: ['<%= app.dirs.img %>/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
},
sprite: {
files: ['<%= app.dirs.img %>/sprite/*.png', '<%= app.dirs.img %>/sprite-2x/*.png'],
tasks: ['sprite', 'newer:imagemin']
},
svg: {
files: ['<%= app.dirs.img %>/svg/*.svg'],
tasks: ['imagemin:svg','grunticon']
},
// css: {
// files: ['<%= app.dirs.src %>/**/*.scss'],
// tasks: ['sass_directory_import', 'newer:postcss:before', 'sass', 'postcss:after'],
//},
sass: {
files: ['<%= app.dirs.scss %>/**/*.scss'],
tasks: ['sass_directory_import', 'newer:postcss:before', 'sass', 'postcss:after'],
options: {
debounceDelay: 1000,
event: ['changed']
}
},
js: {
files: ['<%= app.dirs.js %>/**/*.js'],
tasks: ['newer:jshint:dev', 'newer:copy:js', 'newer:concat:all'],
},
jshint: {
files: ['<%= app.dirs.js %>/*.js'],
tasks: ['newer:jshint:dev'],
options: {
event: ['changed']
}
},
data: {
files: ['<%= app.dirs.data %>/**/*.json'],
tasks: ['newer:jsonlint', 'newer:copy:data'],
},
bower: {
// Watch for additions to bower.json then run bower_concat
files: 'bower.json',
tasks: ['bower_concat', 'uglify:dev'],
options: {
event: ['changed']
}
}
},
bower_concat: {
bower: {
dest: {
js: 'compiled/js/bower.js',
scss: '<%= app.dirs.scss %>/_bower.scss',
css: '<%= app.dirs.scss %>/_bower.scss'
},
exclude: [
'breakpoint-sass',
'sassy-maps',
'respond',
'selectivizr2',
'es5-shim'
],
dependencies: {
'jquery.customSelect': 'jquery',
'velocity': 'jquery'
},
mainFiles: {
'bootstrap-sass': 'assets/javascripts/bootstrap.js',
'retina.js': 'dist/retina.js',
'fitvids': 'jquery.fitvids.js',
'bootstrap-datepicker': 'dist/js/bootstrap-datepicker.min.js',
'bxslider-4': ["dist/jquery.bxslider.js", "dist/jquery.bxslider.css"]
},
bowerOptions: {
// relative: false
}
}
},
jshint: {
options: {
'-W097': true,
'devel': true,
'predef': ['angular']
},
dev: ['Gruntfile.js', '<%= app.dirs.js %>/ui.js', '<%= app.dirs.js %>/ng-scripts.js']
},
jsonlint: {
dev: {
src: ['<%= app.dirs.src %>/dummy-data/**/*.json']
}
},
concat: {
all: {
src: [
'compiled/js/ui/*'
],
dest: 'compiled/js/ui.js',
}
},
uglify: {
options: {
mangle: true
},
dev: {
files: {
'compiled/js/bower.min.js': ['compiled/js/bower.js'],
'compiled/js/ui.min.js': ['compiled/js/ui.js']
}
}
},
sprite: {
core: {
src: '<%= app.dirs.img %>/sprite/*.png',
dest: '<%= app.dirs.img %>/sprite.png',
destCss: '<%= app.dirs.scss %>/_sprite.scss',
algorithm: 'top-down',
padding: 0
},
retina: {
src: '<%= app.dirs.img %>/sprite-2x/*.png',
dest: '<%= app.dirs.img %>/sprite-2x.png',
destCss: '<%= app.dirs.scss %>/_sprite-2x.scss',
algorithm: 'top-down',
padding: 0
}
},
grunticon: {
dev: {
files: [{
expand: true,
cwd: '<%= app.dirs.img %>/svg/stripped',
src: ['*.svg'],
dest: "compiled/images/svg/output"
}],
options: {
// Handle your options as you normally would here
enhanceSVG: true,
embedIcons: true
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true, // Enable dynamic expansion
cwd: '<%= app.dirs.img %>/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'compiled/images/' // Destination path prefix
}]
},
svg: {
options: {
svgoPlugins: [{
removeViewBox: false
}]
},
files: [{
expand: true, // Enable dynamic expansion
cwd: '<%= app.dirs.img %>/svg/', // Src matches are relative to this path
src: ['*.svg'], // Actual patterns to match
dest: '<%= app.dirs.img %>/svg/stripped/' // Destination path prefix
}]
}
},
modernizr: {
dist: {
"crawl": true,
"customTests": [],
"dest": "<%= app.dirs.compiled %>/js/lib/modernizr-output.js",
"tests": [
],
"options": [
"html5shiv",
"setClasses"
],
"files" : {
"src": [
"<%= app.dirs.scss %>/**/*.scss",
"!lib/**/*"
]
},
"uglify": true
}
},
/*BrowserSync task below sets up a simple hhtp server and auto refresh/insert. It also has some very cool features with accessing on LAN*/
browserSync: {
dev: {
bsFiles: {
src: ["compiled/*.html", "compiled/pages/*.html", "compiled/widgets/*.html", "compiled/components/*.html", "compiled/css/**/*.css", "compiled/js/**/*.js", "compiled/images/**/.{jpg,png,gif}"],
},
options: {
watchTask: true,
server: {
baseDir: "compiled"
}
}
},
build: {
options: {
watchTask: false,
server: {
baseDir: "compiled"
}
}
}
}
});
/*Frontend */
grunt.registerTask('default', ['clean:data', 'jshint:dev', 'jsonlint', 'copy:dev', 'bower_concat', 'concat', 'uglify', 'assemble', 'sprite', 'imagemin:svg', 'grunticon', 'newer:imagemin', 'sass_directory_import', 'postcss:before', 'sass', 'postcss:after', 'csssplit', 'cssmin', 'modernizr', 'browserSync:dev', 'watch']);
};
附件是显示我的终端和打开网页的屏幕截图。奇怪的是，“modernizr”规则在 browserSync 部分中，这不会发生在我的工作机器上。相同的文件。太令人沮丧了。显示运行 grunt 时看到的屏幕截图
