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

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

####1. nodeをインストール（[node_install](http://nodejs.org/)）

####2. package.jsonの作成
```
>> npm init
```

####3. gulp_install
```
>> npm install gulp -g
```

####4. local_gulp_install
```
>> npm install gulp --save-dev
```

####5. gulpfile.jsの作成
```js:gulpfile.js
var gulp = require('gulp');
```

####6. SASSコンパイル
```
>> sass/style.scss
```

####7. gulp-sass
```
>> npm install gulp-sass --sass-dev
```

####8. gulpfile.jsの作成
```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の作成
```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の作成
```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の作成
```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監視)
```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');

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)
```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');

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の作成(エラー時落とさないようにする)
```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
```