gulp + sass で快適な css 環境を作る

構造

• ブログなどでディレクトリ構造を書くための記号一覧

gulpfile.js
package.json
public/
  ├ css/
  │   └ style.css
  │
  └ index.html
sass/
  ├ base/
  │   ├ _all.scss
  │   └ _reset.scss
  │
  └ style.scss

インストール〜準備

• npm はインストール済みを前提
• -g をつけたインストールは個人的には好きではないのでしない

$ cd /path/to/your/project
# package.json 生成
$ npm init
# 必要なパッケージをインストール
$ npm install --save-dev gulp gulp-autoprefixer gulp-load-plugins gulp-plumber gulp-sass gulp-sourcemaps node-sass

package.json

• "scripts" { ... } の記述は init 時には書いてないので追加しておく。
  • これにより npm run gulp で node_modules/.bin/gulp を起動できる。

{
  "name": "sample",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "node-sass": "^4.12.0"
  },
  "scripts": {
    "gulp": "gulp"
  }
}

gulpfile.js

• /sass の中身を /public/css/style.css に書き出す。

const gulp = require('gulp')
const gulpLoadPlugins = require('gulp-load-plugins');

const $ = gulpLoadPlugins();


function build(callback) {
	gulp.src('sass/style.scss')
		.pipe($.plumber())
		.pipe($.sourcemaps.init())
		.pipe($.sass({
			// [outputStyle] Type: String Default: nested Values: nested, expanded, compact, compressed
			outputStyle  : 'compressed',
		}).on('error', $.sass.logError))
		.pipe($.autoprefixer({
			browsers: ['last 1 versions']
		}))
		.pipe($.sourcemaps.write())
		.pipe(gulp.dest('./public/css'))
	callback()
}


function watch(callback) {
	gulp.watch('sass/**/*.scss', build)
}


gulp.task(watch)

gulp.task('default', (callback) => {
	build(() => {
		callback()
	})
})

/sass/style.scss

@import "base/all";

/sass/base/_all.scss

@import "reset";

/sass/base/_reset.scss

• 適当に書く

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #444;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}

a {
	color: #f44;
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}

gulp でビルド

$ cd /path/to/your/project
$ npm run gulp