Menu

ToC

Tags

gulpでSCSSからCSSをビルド

舊暦

  • 平成廿玖年神無月參日 (月・辛亥・晴)

晩御飯

  • 雜炊 (きのふの鍋の殘りで)

gulpでSCSSからCSSをビルド

最低限以下の三つが必要。

インストールは以下の通り。

% npm install --save-dev gulp gulp-logger gulp-sass
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
pyons-diary@0.0.1 /home/pyon/scm/diary
├── gulp@3.9.1
├── gulp-logger@0.0.2
└── gulp-sass@3.1.0

npm WARN pyons-diary@0.0.1 No repository field.

gulpfile.js には最低限以下の事を記述する。

'use strict';

var SCSS_DIR = 'static/scss';
var CSS_DIR  = 'static/css';

var path = require('path');

var gulp   = require('gulp');
var logger = require('gulp-logger');
var sass   = require('gulp-sass');

gulp.task('build:css', function(){
    return gulp.src(path.join(SCSS_DIR, 'site.scss'), {base: SCSS_DIR})
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest(CSS_DIR))
        .pipe(logger({beforeEach: '[build-css] wrote: '}));
});

これで gulp build:css を實行すればCSSファイルが生成される。

articleとsection

articlesection の使い道が今ひとつ判らなかつたのでググつた。

ホームページ(トップページ)と分類ページのテンプレートを共通化

Hugoでホームページ用のテンプレートの探索順序は以下の通り。

  1. /layout/index.html
  2. /layout/_default/list.html
  3. /themes/THEME/layout/index.html
  4. /themes/THEME/layout/_default/list.html

また分類(taxonomy)ページのテンプレートの探索順序は以下の通り。

  1. /layouts/taxonomy/SINGULAR.html
  2. /layouts/_default/taxonomy.html
  3. /layouts/_default/list.html (ホームページと共通)
  4. /themes/THEME/layouts/taxonomy/SINGULAR.html
  5. /themes/THEME/layouts/_default/taxonomy.html
  6. /themes/THEME/layouts/_default/list.html

ホームページと分類ページでテンプレートを共通にしたければ list.html を使へば良い。

參考