第2章 Sassの利用環境を整えよう

2-6 セットアップ済みの環境を作成する方法

package.json の作成

npm init -y

{
  "name": "test_project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

gulpとgulp-sassをローカルインストール

npm install --save-dev gulp

"devDependencies": {
  "gulp": "^4.0.2"
}

npm install --save-dev gulp-sass

"devDependencies": {
  "gulp": "^4.0.2",
  "gulp-sass": "^4.1.0"
}

gulpfile.jsの作成

※初版・2刷の方へ：gulp v4からgulp.watch APIの仕様が変更になり、本書のコードではsass:watchタスクがエラーになるため、v4を使用する場合は11行目のsass:watchタスクの第二引数を下記コードへ変更してください。（.coffeeは10行目）

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

gulp.task('sass', function() {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

gulp = require('gulp')
sass = require('gulp-sass')

gulp.task 'sass', ->
  gulp.src './sass/**/*.scss'
    .pipe(sass(outputStyle: 'expanded'))
    .pipe gulp.dest('./css')

gulp.task 'sass:watch', ->
  gulp.watch './sass/**/*.scss', gulp.task 'sass'

import gulp from 'gulp';
import sass from 'gulp-sass';

gulp.task('sass', () => {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});