Cacher is the code snippet organizer for pro developers

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "hoge",
  "main": "index.js",
  "devDependencies": {
    "gulp": "^3.8.9",
    "gulp-autoprefixer": "^1.0.1",
    "gulp-compass": "^2.1.0",
    "gulp-plumber": "^0.6.6",
    "browser-sync": "^2.18.13"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hoge",
  "license": "ISC"
}

'use strict';

// ディレクトリ
var path = {
  'imgPath': 'images', // 例）'htdocs/images'
  'sassPath': 'scss', // 例）'htdocs/scss'
  'cssPath': 'css', // 例）'htdocs/stylesheets'
  'jsPath': 'js' // 例）'htdocs/javascripts'
}

// 使用パッケージ
var gulp = require('gulp');
var browserSync = require('browser-sync').create();　
var compass = require('gulp-compass'); // Sassコンパイル
var autoprefixer = require('gulp-autoprefixer'); // ベンダープレフィックス付与
var plumber = require('gulp-plumber'); // コンパイルエラーが出てもwatchを止めない

//ブラウザ同期
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./",
            index: "./index.html"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
})

// Sassをコンパイルし、ベンダープレフィックスを付与
gulp.task('compass', function(){
  gulp.src(path.sassPath + '/**/*.scss')
    .pipe(plumber())
    .pipe(compass({
      config_file: 'config.rb',
      sass: path.sassPath,
      css: path.cssPath,
      image: path.imgPath
    }))
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 7'))
    .pipe(gulp.dest(path.cssPath + '/'))
});


// ファイル変更監視
gulp.task('watch', function() {
  //
  gulp.watch(path.sassPath + '/**/*.scss', function(event){
    gulp.run('compass')
  });
  gulp.watch('*.html', function(event){
    gulp.run('bs-reload')
  });
  gulp.watch('*/*.css', function(event){
    gulp.run('bs-reload')
  });
  gulp.watch('*/*.js', function(event){
    gulp.run('bs-reload')
  });
//
});

// タスク実行
gulp.task('default', ['browser-sync','compass','watch']); // デフォルト実行

## gulp
### 使用パッケージ
1. gulp-compass       // Sassコンパイル
2. gulp-autoprefixer　// ベンダープレフィックス付与
3. gulp-plumber       // コンパイルエラーが出てもwatchを止めない
4. browser-sync       // リロード・webサーバー起動　
---
### 構造
root
├ index.html
├ css
├ scss
├ images
├ js
├ gulpfile.js
├ package.json
└ config.rb
---
コマンドに以下
=============================
npm install -g gulp
=============================
package.jsonにないプラグインを削除
npm prune
=============================
package.jsonと同じプラグインをインストール
npm install
=============================