Cacher is the code snippet organizer for pro developers

cdでフォルダに移動

フォルダ階層
root
├ index.html
├ css
├ scss
├ images
├ js
├ gulpfile.js
├ package.json
└ config.rb

コマンドに以下
=============================
npm install -g gulp
=============================
npm install
=============================

{
  "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-imagemin": "^1.2.1",
    "gulp-plumber": "^0.6.6",
   // "gulp-webserver": "^0.8.6",
    "browser-sync": "^2.18.13",
    "imagemin-pngquant": "^4.0.0"
  },
  "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 webserver = require('gulp-webserver'); // ローカルサーバ起動　
var browserSync = require('browser-sync').create();　
var compass = require('gulp-compass'); // Sassコンパイル
var autoprefixer = require('gulp-autoprefixer'); // ベンダープレフィックス付与
var imagemin = require('gulp-imagemin'); // 画像圧縮
var pngquant = require('imagemin-pngquant'); // 画像圧縮
var plumber = require('gulp-plumber'); // コンパイルエラーが出てもwatchを止めない

//ローカルサーバー保留
gulp.task('webserver', function(){
  gulp.src('./') // ルート・ディレクトリ
    .pipe(webserver({
      livereload: true,
      directoryListing: false,
      open: true,
      port: 8000
    }));
});

//ブラウザ同期
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('imagemin', function(){
  gulp.src(path.imgPath + '/*')
    .pipe(plumber())
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    }))
    .pipe(gulp.dest(path.imgPath + '/'));
});

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

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