【オレオレ】gulp 初期設定

最初

作業ディレクトリルートに移動

Terminal

npm init
gulp -v
[hh:mm:ss] CLI version 3.8.10

CLI versionと同じversionを作業ディレクトリルートにインストール

Terminal

npm install gulp@3.8.10 --save-dev

必要なプラグインをインストール

• sass(scssのbuild)
• autoprefixer(ベンダープリフィックス勝手につけてくれる)
• csscomb(cssのプロパティ順、整頓)
• spritesmith(css spriteの自動作成)
• styledocco(スタイルガイドの作成)

Terminal

npm install gulp-sass --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-csscomb --save-dev
npm install gulp.spritesmith --save-dev
npm install gulp-styledocco --save-dev

gulpfile.jsを作業ディレクトリルートに作成

gulpfile.jsの中身

gulpfile.js

var gulp=require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var spritesmith = require('gulp.spritesmith');
var styledocco = require('gulp-styledocco');

gulp.task('styledocco', function () {
  gulp.src('dist/css/*.css')
    .pipe(styledocco({
      out: 'docs',
      name: 'styleguide'
    }));
});
gulp.task('styles', function() {
  return gulp.src('src/styles/main.css')
    .pipe(csscomb())
    .pipe(gulp.dest('./build/css'));
});

gulp.task('default', function () {
  gulp.src('sass/*.scss')
  .pipe(sass())
  .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
  .pipe(csscomb())
  .pipe(gulp.dest('./dist/css'));
});
gulp.task('sass', function () {
  gulp.src('sass/*.scss')
  .pipe(sass())
  .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
  .pipe(csscomb())
  .pipe(gulp.dest('./dist/css'));
});

gulp.task('sprite', function () {
    var spriteData = gulp.src('sprite/*')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss'
        }));
    spriteData.img.pipe(gulp.dest('./dist/images'));
    spriteData.css.pipe(gulp.dest('sass'));
});

※上記は自分用なのでまるっとコピーしてできなくても泣かないこと

プラグインの設定

csscomb

.csscomb.jsonを作業ディレクトリルートに配置

.csscomb.jsonの中身

.csscomb.json

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": false,
    "leading-zero": false,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": "",
    "space-before-combinator": "",
    "space-after-combinator": "",
    "space-between-declarations": "",
    "space-before-opening-brace": "",
    "space-after-opening-brace": "",
    "space-after-selector-delimiter": "",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,
    "sort-order": [ [
        "position",
        "top",
        "right",
        "bottom",
        "left"
    ]]
}

※上記は自分用なのでまるっとコピーしてできなくても泣かないこと