GulpでSassを動かす方法（Mac）

#「Gulp」で「Sass」を動かす方法（Mac）

####1. nodeをインストール（node_install）

####2. package.jsonの作成

>> npm init

####3. gulp_install

>> npm install gulp -g

####4. local_gulp_install

>> npm install gulp --save-dev

####5. gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');

####6. SASSコンパイル

>> sass/style.scss

####7. gulp-sass

>> npm install gulp-sass --sass-dev

####8. gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
});

####9. gulp-autoprefixer

>> npm install gulp-autoprefixer --save-dev

####10. gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
});

####11. gulp-frontnote

>> npm install gulp-frontnote --save-dev

####12. gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');
var frontnode = require('gulp-frontnode');

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
      .pipe(frontnote({
           css: '../css/style.css'
      }))
});

####13. jsの圧縮

>> npm install gulp-uglify --save-dev

####14. gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');
var frontnode = require('gulp-frontnode');
var uglify = require('gulp-uglify');

gulp.task('html', function() {
     gulp.src('**/*.html')
});

gulp.task('js', function() {
     gulp.src(['js/**/*.js', '!js/min/**/*.js'])
     .pipe(uglify())
     .pipe(gulp.dest('./js/min'));
});

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
      .pipe(frontnote({
           css: '../css/style.css'
      }))
});

####15. gulpfile.jsの作成(file監視)

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');
var frontnode = require('gulp-frontnode');
var uglify = require('gulp-uglify');
var browser = require('browser-sync');

gulp.task('html', function() {
     gulp.src('**/*.html')
});

gulp.task('js', function() {
     gulp.src(['js/**/*.js', '!js/min/**/*.js'])
     .pipe(uglify())
     .pipe(gulp.dest('./js/min'));
});

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
      .pipe(frontnote({
           css: '../css/style.css'
      }))
});

gulp.task('default', function() {
     gulp.watch('**/*.html', ['html']);
     gulp.watch(['js/**/*.js'], ['js']);
     gulp.watch('sass/**/*.scss', ['sass']);
});

####16. LiveReload

>> npm install browser-sync --save-dev

####17. gulpfile.jsの作成(Reload)

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');
var frontnode = require('gulp-frontnode');
var uglify = require('gulp-uglify');
var browser = require('browser-sync');

gulp.task('server', function() {
     browser({
          server: {
               baseDir: './';
               directory: true
          },
　　　　　　　　　　　　　　　　　　　　startPath: 'index.html'
     });
});

gulp.task('html', function() {
     gulp.src('**/*.html')
     .pipe(browser.reload({stream: true}))
});

gulp.task('js', function() {
     gulp.src(['js/**/*.js', '!js/min/**/*.js'])
     .pipe(uglify())
     .pipe(gulp.dest('./js/min'))
     .pipe(browser.reload({stream: true}))
});

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
      .pipe(frontnote({
           css: '../css/style.css'
      }))
     .pipe(browser.reload({stream: true}))
});

gulp.task('default', ['server'], function() {
     gulp.watch('**/*.html', ['html']);
     gulp.watch(['js/**/*.js'], ['js']);
     gulp.watch('sass/**/*.scss', ['sass']);
});

####18. エラー時落とさないようにする

>> npm install gulp-plumber --save-dev

####19. gulpfile.jsの作成(エラー時落とさないようにする)

gulpfile.js

var gulp = require('gulp');
var sass = require('sass');
var autoprefixer = require('gulp-autoprefixer');
var frontnode = require('gulp-frontnode');
var uglify = require('gulp-uglify');
var browser = require('browser-sync');
var plumber = require('gulp-plumber');

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

gulp.task('html', function() {
     gulp.src('**/*.html')
     .pipe(browser.reload({stream: true}))
});

gulp.task('js', function() {
     gulp.src(['js/**/*.js', '!js/min/**/*.js'])
     .pipe(uglify())
     .pipe(gulp.dest('./js/min'))
     .pipe(browser.reload({stream: true}))
});

gulp.task('sass', function() {
     gulp.src('sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'))
      .pipe(autoprefixer())
      .pipe(frontnote({
           css: '../css/style.css'
      }))
     .pipe(plumber())
     .pipe(browser.reload({stream: true}))
});

gulp.task('default', ['server'], function() {
     gulp.watch('**/*.html', ['html']);
     gulp.watch(['js/**/*.js'], ['js']);
     gulp.watch('sass/**/*.scss', ['sass']);
});

####20. gulp実行

>> gulp