project
┃-ejs
┃　┃-この配下にejsファイルを作成していく
┃　┃-img(ここに画像を配置すると、自動的にhtml配下にもimgフォルダが生成され、軽量化された画像が出力されます)
┃　┃-includes
┃　┃　┃
┃　┃　meta.json(meta情報の一括管理。ここでの説明は割愛。)
┃-html
┃　┃-node_modules
┃　┃-gulpfile.js
┃　┃-package.json
┃　┃-gulp_install.command
┃　┃-css（ここにscssで変換されたcssファイルが格納されます）
┃-scss
┃　┃-この配下にscssファイルを作成していく

#!/bin/sh

cd `dirname $0`
npm init -y
npm install gulp gulp-sass gulp-autoprefixer gulp-plumber gulp-notify gulp-clean-css gulp-sass-glob browser-sync gulp-ejs gulp-rename gulp-changed gulp-imagemin imagemin-gifsicle imagemin-jpeg-recompress imagemin-pngquant gulp-svgmin   --save-dev
npm run build

// gulp core
var gulp = require('gulp');

var fs = require( 'fs' );

// sass compiler
var sass = require('gulp-sass');
// auto prifix
var autoprefixer = require('gulp-autoprefixer');
// error handling
var plumber = require('gulp-plumber');
// notify
var notify = require('gulp-notify');
// clean css
var cleanCSS = require('gulp-clean-css');
// server
var browser = require("browser-sync");

var ejs = require("gulp-ejs");

var rename = require("gulp-rename");

var sassGlob = require("gulp-sass-glob");

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

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

var imageminJpg = require('imagemin-jpeg-recompress');

var imageminPng = require('imagemin-pngquant');

var imageminGif = require('imagemin-gifsicle');

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

var paths = {
  srcDir : '../ejs/**/',
  dstDir : './'
}
//task

gulp.task('server', function() {
  browser({
    server: {
      baseDir: "./"
    }
  });
});


gulp.task('sass', function() {
  gulp.src('../scss/**/*.scss')
    .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sass())
    .pipe(autoprefixer({
      browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4','IE 10'],
            cascade: false
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('css/'))
    .pipe(browser.reload({
      stream: true
    }));
});


gulp.task('ejs', function() {
  var json = JSON.parse(fs.readFileSync("../ejs/includes/meta.json","utf-8"));
  gulp.src(
      ["../ejs/**/*.ejs", '!' + "../ejs/**/_*.ejs"] //参照するディレクトリ、出力を除外するファイル
    )
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(ejs({json:json}))
    .pipe(rename({
      extname: ".html"
    })) //拡張子をhtmlに
    .pipe(gulp.dest("./"));
});

//タスク部分
gulp.task('imagemin', function(){
    var srcGlob = paths.srcDir + '/*.+(jpg|jpeg|png|gif)'; //圧縮前画像ファイル
    var dstGlob = paths.dstDir;　//圧縮後画像ファイル
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(imagemin([
        imageminPng(),
        imageminJpg(),
        imageminGif({
            interlaced: false,
            optimizationLevel: 3,
            colors:180
        })
    ]
    ))
    .pipe(gulp.dest( dstGlob ));
});
// svg画像の圧縮タスク
gulp.task('svgmin', function(){
    var srcGlob = paths.srcDir + '/*.+(svg)';　//圧縮前画像ファイル
    var dstGlob = paths.dstDir;　//圧縮後画像ファイル
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(svgmin())
    .pipe(gulp.dest( dstGlob ));
});


gulp.task('default', ['server', 'sass', 'ejs'], function() {
  gulp.watch('../scss/**/*.scss', ['sass']);
  gulp.watch('../ejs/**/*.ejs', ['ejs']);
  gulp.watch(paths.srcDir + '/**/*', ['imagemin','svgmin']);
});

  "scripts": {
    "build": "gulp"
  }