読者です 読者をやめる 読者になる 読者になる

さよならとりっぷ

しがないWebエンジニアの雑記とポエム

gulpでSCSSのコンパイルとliveloadするまで

ビルドツール「gulp.js」を使ってみる | MONSTER DIVE【モンスターダイブ】
とりあえずここをざっと設定する

» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
sassとliveloadはこの辺

Error: Forbidden」が出る
ググると以下の記事
Missing files produce a stack trace · Issue #54 · AveVlad/gulp-connect · GitHub

rootディレクトリを「root: [__dirname]」表記に変更

gulpfile.js

'use strict';
var _gulp = require('gulp');
var _compass = require('gulp-compass');
var _connect = require('gulp-connect');

_gulp.task('compass', function(){
	_gulp.src('src/sass/*.scss').pipe(_compass({
		// config_file:"src/sass/config.rb",
		comments:false,
		css: 'bin/css/',
		sass: 'src/sass/'
	}));
});

_gulp.task('connectDev',function(){
	_connect.server({
		root:[__dirname],
		port: 9000,
		livereload: true
	});
});

_gulp.task('html',function(){
	_gulp.src('./*.html')
		.pipe(_connect.reload());
});

_gulp.task('watch',function(){
	_gulp.watch('src/sass/*.scss', function(event){
		_gulp.run('compass');
	});
	_gulp.watch(['bin/js/*.js'],['html']);
	_gulp.watch(['bin/css/*.css'],['html']);
	_gulp.watch(['./*.html'],['html']);	
});

_gulp.task('default',['compass','connectDev','watch']);

ディレクトリ構成は適宜環境に応じて書き換える
とりあえず僕はこれで動いた

scssはこれが参考になると思う
【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|Compass基礎編 | Developers.IO

広告を非表示にする