Jekyll не отображает веб-страницу в localhost - PullRequest
0 голосов
/ 29 мая 2019

У меня есть страница github, и я хочу создать локальную среду для ее разработки с использованием gulp.Я установил Jekyll и gulp, и когда я выполняю 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)

Однако вывод веб-страницы в браузере составляет

enter image description here

Более того, когда я запускаю gulp, я вижу только файл /asset/css/main.css и отмечаю еще;вот почему я изменил базовый каталог на "./" с "_site" в orijinal gulpfile.js


Некоторая информация о моей настройке: я использую 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']);

1 Ответ

0 голосов
/ 29 мая 2019

Я решил эту проблему, следуя этой установке и создав файл style.scss в

. / Asses / css / style.scss с содержимым

---
---

@charset "UTF-8";

Затем, запустив

bundle exec jekyll serve

Все прошло хорошо.

...