Jekyll不会在本地主机中呈现Webpge

Question

我有一个github页面，我想构建一个本地环境以使用gulp进行开发。我已经安装了Jekyll和gulp，并且在执行时     吞咽 我在终端中得到以下输出

Onurcans-MacBook-Air:onurcanbektas.github.io onurcanbektas$ gulp
[17:42:02] Using gulpfile /Volumes/Junction/Academia/wwwhome/onurcanbektas.github.io/onurcanbektas.github.io/gulpfile.js
[17:42:02] Starting 'js'...
[17:42:02] Finished 'js' after 11 ms
[17:42:02] Starting 'sass'...
[17:42:02] Finished 'sass' after 2.03 ms
[17:42:02] Starting 'stylus'...
[17:42:02] Finished 'stylus' after 2.92 ms
[17:42:02] Starting 'browser-sync'...
[17:42:02] Finished 'browser-sync' after 46 ms
[17:42:02] Starting 'watch'...
[17:42:02] Finished 'watch' after 38 ms
[17:42:02] Starting 'default'...
[17:42:02] Finished 'default' after 53 μs
[BS] 0 file changed ()
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.1.113:3000
[BS] Serving files from: ./
[BS] 1 file changed (main.css)
[BS] 1 file changed (main.js)

但是，浏览器中网页的输出为

此外，当我运行gulp时，我仅在其中看到/asset/css/main.css文件，并注意其他内容；因此，我将原始目录从原始gulpfile.js中的“ _site”更改为“ ./”。

---

有关我的设置的一些信息：我使用OSX El capitan 11.1.2

$ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin15]

$ gem -v
3.0.3

$ gem env
- GEM PATHS:
 - /usr/local/lib/ruby/gems/2.6.0
 - /Users/onurcanbektas/.gem/ruby/2.6.0
 - /usr/local/Cellar/ruby/2.6.3/lib/ruby/gems/2.6.0

gulpfile.js：

    var gulp        = require('gulp'),
    plumber     = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    stylus      = require('gulp-stylus'),
    uglify      = require('gulp-uglify'),
    concat      = require('gulp-concat'),
    sass        = require('gulp-sass'),
    jeet        = require('jeet'),
    rupture     = require('rupture'),
    koutoSwiss  = require('kouto-swiss'),
    prefixer    = require('autoprefixer-stylus'),
    imagemin    = require('gulp-imagemin'),
    cp          = require('child_process');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};

var jekyllCommand = (/^win/.test(process.platform)) ? 'jekyll.bat' : 'jekyll';

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
     cp.spawn(jekyllCommand, ['build'], {stdio: 'inherit'})
        .on('close', done);
});

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', function() {
    gulp.task('jekyll-build');
    browserSync({
        server: {
            baseDir: './',
        }
    });
});

/**
 * Stylus task
 */
gulp.task('stylus', function(){
        gulp.src('src/styl/main.styl')
        .pipe(plumber())
        .pipe(stylus({
            use:[koutoSwiss(), prefixer(), jeet(),rupture()],
            compress: true
        }))
        .pipe(gulp.dest('_site/assets/css/'))
        .pipe(browserSync.reload({stream:true}))
    .pipe(gulp.dest('assets/css'));
});

/**
 * Javascript Task
 */
gulp.task('js', function(){
     gulp.src('src/js/**/*.js')
        .pipe(plumber())
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.reload({stream:true}))
    .pipe(gulp.dest('_site/assets/js/'));
});

gulp.task('sass', function () {
     gulp.src('assets/css/main.scss')
        .pipe(sass({
            includePaths: ['css'],
            onError: browserSync.notify
        }))
        .pipe(plumber())
        .pipe(gulp.dest('_site/assets/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('assets/css'));
});

/**
 * Imagemin Task
 */
gulp.task('imagemin', function() {
    return gulp.src('src/img/**/*.{jpg,png,gif}')
        .pipe(plumber())
        .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
        .pipe(gulp.dest('assets/img/'));
});

/**
 * Watch stylus files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('src/styl/**/*.styl', ['stylus']);
    gulp.watch('src/js/**/*.js', ['js']);
    gulp.watch('src/css/**/*.css', ['sass']);
    gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
    gulp.watch(['*.html', '_includes/*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

/**
 * Default task, running just `gulp` will compile the stylus,
 * compile the jekyll site, launch BrowserSync & watch files.
 */

/**var connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: './',
    livereload: true
  })
});*/

gulp.task('default', ['js', 'sass', 'stylus', 'browser-sync', 'watch']);

Answer 1

我通过遵循this安装并在

中创建style.scss文件来解决此问题。

  

./ asses / css / style.scss   内容

---
---

@charset "UTF-8";

然后通过运行

  

捆绑执行杰基尔服务

一切都很好。