0

我正在尝试使用 Grunt、BrowsersSync、Jekyll 和 Sass 设置样板模板。

这几天我一直在不停地工作，总有一个绊脚石。我希望有人对此有一些经验，可以为我指明正确的方向。

我不会挑剔特定的插件，它更多地是关于预期的结果。

我想运行该grunt任务并使用 BrowserSync 为站点提供服务，然后观察 Sass 和 Jekyll 相关文件的更改，如果有更改，请更新浏览器。

我正在使用一台 Windows 机器，这可能会有所作为，因为我已经看到使用grunt-shell.

当前代码如下：

'use strict';

module.exports = function (grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    // Grunt Jekyll
    jekyll: {
      build: {
        dest: "_site"
      }
    },

    // Grunt Sass
    sass: {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          'dist/css/style.css': 'scss/index.scss'
        }
      }
    },

    // Grunt Contrib Watch
    watch: {
      sass: {
        files: ['scss/**/**/*.scss'],
        tasks: ['sass']
      },
      jekyll: {
        files: ['**/*.html', '**/**/*.md', 'dist/css/*.css'],
        tasks: ['jekyll']
      }
    },

    // Grunt BrowserSync
    browserSync: {
      dev: {
        bsFiles: {
          src: ['_site/dist/css/style.css', '_site/**/*.html']
        },
        options: {
          watchTask: true,
          server: '_site'
        }
      }
    }

  });

  // Load Grunt Plugins
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-jekyll');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-browser-sync');


  // Register Tasks
  grunt.registerTask('build', ['sass', 'jekyll']);
  grunt.registerTask('default', ['build', 'browserSync', 'watch']);

};

我不是 Grunt 的专家，所以如果有什么完全错误的地方，请放轻松。

谢谢你看...

4

0 回答 0