javascript – gulp观看并重新加载jekyll,sass,js

2019-06-09 21:20:20 阅读：164 来源： 互联网

标签：javascript gulp jekyll gulp-watch gulp-sass

我正在尝试构建一个gulpfile,它将观看jekyll / sass / js并与浏览器同步.
该脚本正确地监视jekyll的更改,重建并在浏览器中注入所有更改.

但我无法弄清楚为什么它没有同步sass / js的变化,即使它们已经被观看过了.再生.任何帮助将不胜感激！

/*** gulp.js ***/

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var browserSync  = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var uglify       = require('gulp-uglify');
var jshint       = require('gulp-jshint');
var header       = require('gulp-header');
var rename       = require('gulp-rename');
var minifyCSS    = require('gulp-minify-css');
var cp           = require('child_process');
var package      = require('./package.json');

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

var banner = [
    '/*!\n' +
    ' * <%= package.name %>\n' +
    ' * <%= package.title %>\n' +
    ' * <%= package.url %>\n' +
    ' * @author <%= package.author %>\n' +
    ' * @version <%= package.version %>\n' +
    ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' +
    ' */',
    '\n'
].join('');


/**
 * 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', ['css', 'js', 'jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: 'html'
        }
    });
});

gulp.task('css', ['bs-reload'], function () {
    return gulp.src('themes/dental-theme/assets/scss/main.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
    .pipe(gulp.dest('build/css'))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(header(banner, { package : package }))
    .pipe(gulp.dest('build/css'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('js',function(){
  gulp.src('themes/dental-theme/assets/js/main.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(header(banner, { package : package }))
    .pipe(gulp.dest('build/js'))
    .pipe(uglify())
    .pipe(header(banner, { package : package }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('build/js'))
    .pipe(browserSync.reload({stream:true, once: true}));
});

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: "html"
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['css', 'js', 'browser-sync'], function () {
    gulp.watch("themes/dental-theme/assets/scss/*.scss", ['css']);
    gulp.watch("themes/dental-theme/assets/js/*.js", ['js']);
    gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

解决方法:

你的js和css手表只是重新生成文件,但没有做一个Jekyll构建,你的html手表.

试试：

gulp.task('default', ['css', 'js', 'browser-sync'], function () {
    gulp.watch("assets/scss/*/*.scss", ['css', 'jekyll-rebuild']);
    gulp.watch("assets/js/*.js", ['js', 'jekyll-rebuild']);
    gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

编辑：

如果您不想每次只复制生成资产到目标文件夹,那么您不想构建您的Jekyll：

gulp.task('default', ['css', 'js', 'browser-sync'], function () {
    gulp.watch("assets/scss/*/*.scss", ['css', 'css-to-site']);
    gulp.watch("assets/js/*.js", ['js', 'js-to-site']);
    gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

gulp.task('js-to-site', function () {
  gulp.src('build/js/*')
    .pipe(gulp.dest('html/themes/dental-theme/js'));
    browserSync.reload();
});

gulp.task('css-to-site', function () {
  gulp.src('build/css/*')
    .pipe(gulp.dest('html/themes/dental-theme/css'));
    browserSync.reload();
});

没有测试过.

标签：javascript,gulp,jekyll,gulp-watch,gulp-sass
来源： https://codeday.me/bug/20190609/1207529.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – gulp观看并重新加载jekyll,sass,js