Sass 杰基尔·萨斯

嗨，我有一个网站设置。但是，我无法让jekyll将我在sass文件中所做的实际更改编译为每个文章帖子的css文件

我需要在我的吞咽文件中添加一些东西吗？我以为jekyll会自动将sass样式编译成css，而不需要在gulp中实现它？还是package.json

我使用gulp命令让sass工作并编译网站布局css文件夹，但是在文章部分和帖子中，当我更改每个文章的sass样式文件时，什么都不会发生，我必须直接编辑实际的css文件以查看更改

我遗漏了一些东西这是我的代码

{
  "name": "browser-sync-jekyll",
  "version": "0.0.0",
  "description": "A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Shane Osbourne",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.8.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-jade": "^1.0.1",
    "gulp-sass": "^2.0.4"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git"
  },
  "keywords": [
    "jekyll",
    "gulp",
    "sass",
    "browsersync"
  ],
  "bugs": {
    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues"
  },
  "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync"
}



var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var cp          = require('child_process');
var jade        = require('gulp-jade');

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




/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['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', ['sass', 'jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        },
        notify: false
    });
});




/**
 * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
 */
gulp.task('sass', function () {
    return gulp.src('assets/css/main.scss')
        .pipe(sass({
            includePaths: ['css'],
            onError: browserSync.notify
        }))
        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('_site/assets/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('assets/css'));
});


gulp.task('jade', function(){
  return gulp.src('_jadefiles/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('_includes'));
});


/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('assets/css/**', ['sass']);
    gulp.watch('assets/js/**', ['jekyll-rebuild']);
    gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
    gulp.watch(['assets/js/**'], ['jekyll-rebuild']);
    gulp.watch('_jadefiles/*.jade', ['jade']);
});




/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'watch']);

{
“名称”：“浏览器同步jekyll”，
“版本”：“0.0.0”，
“说明”：“一个入门项目，包括Jekyll、GulpJS、SASS和BrowserSync的完整设置”，
“main”：“gulpfile.js”，
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”
},
“作者”：“Shane Osbourne”，
“许可证”：“ISC”，
“依赖性”：{
“浏览器同步”：“^2.8.0”，
“吞咽”：“^3.9.0”，
“大口自动刷新器”：“^2.3.1”，
“吞玉”：“^1.0.1”，
“大口大口喝”：“^2.0.4”
},
“存储库”：{
“类型”：“git”，
“url”：”https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git"
},
“关键词”：[
“杰基尔”，
“大口喝”，
“sass”，
“浏览器同步”
],
“臭虫”：{
“url”：”https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues"
},
“主页”：https://github.com/shakyShane/jekyll-gulp-sass-browser-sync"
}
var gulp=需要（“gulp”）；
var browserSync=require（'browser-sync'）；
var sass=需要（'gulp-sass'）；
var前缀=require（'gulp-autoprefixer'）；
var cp=需要（“子流程”）；
var jade=需要（“咕噜咕噜咕噜咕噜咕噜咕噜”）；
变量消息={
jekyllBuild:'正在运行：$jekyllBuild'
};
/**
*建立Jekyll站点
*/
吞咽任务（'jekyll-build'，函数（完成）{
browserSync.notify（messages.jekyllBuild）；
返回cp.spawn（'jekyll'，['build']，{stdio:'inherit'}）
.在（‘关闭’，完成）时；
});
/**
*重建Jekyll&重新加载页面
*/
gulp.task（'jekyll-rebuild'，['jekyll-build']，函数（）{
重新加载（）；
});
/**
*等待jekyll构建，然后启动服务器
*/
gulp.task（'browser-sync'，['sass'，'jekyll build'，function（））{
浏览器同步({
服务器：{
baseDir:“\u站点”
},
通知：假
});
});
/**
*将文件从_scss编译到_site/css（用于实时注入）和site（用于将来的jekyll构建）
*/
吞咽任务（'sass'，函数（）{
return gulp.src（'assets/css/main.scss'）
.管道（sass）({
IncludePath:['css']，
OneError:browserSync.notify
}))
.pipe（前缀（['last 15 versions'，'>1%，'ie 8'，'ie 7']，{cascade:true}））
.管道（大口目的地（“现场/资产/css”））
.pipe（browserSync.reload（{stream:true}））
.管道（吞咽目的地（“资产/css”）；
});
吞咽任务（'jade'，函数（）{
返回一口src（“Jandirebles/*.jade”）
.pipe（jade（））
.管道（吞咽目的地（“包括”）；
});
/**
*查看scss文件的更改和重新编译
*观看html/md文件，运行jekyll并重新加载BrowserSync
*/
吞咽任务（'watch'，函数（）{
狼吞虎咽的手表（'assets/css/**'，['sass']）；
gulp.watch（'assets/js/**'，['jekyll-rebuild']）；
gulp.watch（['index.html'、'u layouts/*.html'、'u includes/*']、['jekyll-rebuild']）；
gulp.watch（['assets/js/**'，['jekyll-rebuild']）；
狼吞虎咽的手表（“jadistribles/*.jade”，“jade”）；
});
/**
*默认任务，只运行'gulp'将编译sass，
*编译jekyll站点，启动BrowserSync&watch文件。
*/
gulp.task（'default'，['browser-sync'，'watch']）；

尝试

Jekyll clean

命令，以便所有文件都可以重新生成，确保增量已关闭。

所以在gulp任务下，我认为Jekyll重建会触发sass，以便Jekyll发布资产来重建css？这是正确的吗？或者它也需要单独插入到吞咽过程中吗？很抱歉有任何困惑，我搜索了很多，没有人直接解决这个技术方面的问题。你不需要咕噜咕噜来管理sass，杰基尔做得非常好。为什么要狼吞虎咽？我就是这么想的。但若我更改文章的Sass文件样式并进行Jekyll构建。还有那一口。它不写css。什么事也没发生。