使用Grunt的浏览器同步 - 浏览器说'无法访问该网站',但它可以在我的其他笔记本电脑上运行

时间:2018-01-12 13:36:03

标签: javascript node.js gruntjs grunt-browser-sync

我有一个可以在我的工作笔记本电脑上工作的网站设置,办公室中的所有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部分中,这在我的工作机器上不会发生。相同的文件。非常令人沮丧。screenshot showing what I see when I run grunt

1 个答案:

答案 0 :(得分:0)

既然你说它适用于你的其他笔记本电脑,很可能问题出在installation上。 第一步:安装CLI

npm install -g grunt-cli

其次,检查根目录并根据需要进行更改。例如:

cd f:
cd  a\c\my_app

第三,检查您是否在您当前的笔记本电脑上正确安装了grunt:例如:

npm install grunt --save-dev

另请参阅:https://gruntjs.com/installing-grunt