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
article
と section
の使い道が今ひとつ判らなかつたのでググつた。
- divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
- HTML5 新要素まとめ【2014/2/14版勧告候補】
- HTML5のお勉強 articleとsectionとか
ホームページ(トップページ)と分類ページのテンプレートを共通化
Hugoでホームページ用のテンプレートの探索順序は以下の通り。
- /layout/index.html
- /layout/_default/list.html
- /themes/THEME/layout/index.html
- /themes/THEME/layout/_default/list.html
また分類(taxonomy)ページのテンプレートの探索順序は以下の通り。
- /layouts/taxonomy/SINGULAR.html
- /layouts/_default/taxonomy.html
- /layouts/_default/list.html (ホームページと共通)
- /themes/THEME/layouts/taxonomy/SINGULAR.html
- /themes/THEME/layouts/_default/taxonomy.html
- /themes/THEME/layouts/_default/list.html
ホームページと分類ページでテンプレートを共通にしたければ list.html
を使へば良い。
參考
晩御飯
- 雜炊 (きのふの鍋の殘りで)