「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