第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": "^3.9.1"
}
npm install --save-dev gulp-sass
"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-sass": "^3.1.0"
}

gulpfile.jsの作成

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', ['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', ['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', ['sass']);
});