gulptest


gulpとsass練習メモ

Node v6.9.1

```ruby:package.json
{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp",
    "start": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-changed": "^3.2.0",
    "gulp-csscomb": "^3.0.8",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.3"
  }
}

```

```ruby:gulpfile.js
var gulp = require('gulp'),
    $    = require('gulp-load-plugins')();

var dir = {
      src: 'src',
      dst: 'dist'
    },
    paths = {
      img:     '/**/*.+(jpg|png|gif|svg)',
      css:     '/**/*.css',
      scss:    '/**/[^_]*.scss',
      scssAll: '/**/*.scss',
      ejs:     '/**/[^_]*.ejs',
      ejsAll:  '/**/*.ejs',
      html:    '/**/*.+(html|htm|php)',
      js:      '/**/*.js'
    }

var options = {
    imagemin: {
      optimizationLevel: 7
    },
    sass: {
        sourcemap: true,
        outputStyle: 'compact' // nested|compact|expanded|compressed
    },
    autoprefixer: {
//            browsers: ['last 2 version', 'ie >= 11', 'iOS >= 8.1', 'Android >= 4.4'],
            browsers: ['last 2 version', 'ie >= 11'],
            cascade: false
    }
}

/* ++++++++++++++++++++++++++++++++++++++++
imagemin
++++++++++++++++++++++++++++++++++++++++ */
gulp.task('imagemin', function(){
    var source = dir.src + paths.img;
    gulp.src(source)
        .pipe($.changed(source))
        .pipe($.imagemin(options.imagemin))
        .pipe(gulp.dest(dir.dst));
});

/* ++++++++++++++++++++++++++++++++++++++++
sass
++++++++++++++++++++++++++++++++++++++++ */
gulp.task('sass', function(){
    gulp.src(dir.src + paths.scss)
        .pipe($.plumber())
//        .pipe($.sourcemaps.init())
        .pipe($.sass(options.sass))
//        .pipe($.csscomb())
        .pipe($.autoprefixer(options.autoprefixer))
//        .pipe($.sourcemaps.write({includeContent: false, sourceRoot: '/src'}))
        .pipe($.rename(function(path){
            path.dirname = path.dirname.replace('scss','css')
        }))
        .pipe(gulp.dest(dir.dst));
});

/* ++++++++++++++++++++++++++++++++++++++++
copy html
++++++++++++++++++++++++++++++++++++++++ */
gulp.task('html', function(){
    gulp.src(dir.src + paths.html)
      .pipe(gulp.dest(dir.dst))
});

/* ++++++++++++++++++++++++++++++++++++++++
ejs
++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++
watch
++++++++++++++++++++++++++++++++++++++++ */
gulp.task('watch', function(){
    gulp.watch(dir.src + paths.scssAll, ['sass']);
    gulp.watch(dir.src + paths.img, ['imagemin']);
    gulp.watch(dir.src + paths.html, ['html']);
});

/* ++++++++++++++++++++++++++++++++++++++++
build
++++++++++++++++++++++++++++++++++++++++ */
gulp.task('default', ['imagemin','sass','html','watch']);
```

```:.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": true,
    "quotes": "double",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "sort-order": [
        [
        "display",
        "flex",
        "flex-grow",
        "flex-shrink",
        "flex-basis",
        "flex-flow",
        "flex-direction",
        "flex-wrap",
        "grid",
        "grid-template",
        "grid-template-rows",
        "grid-template-columns",
        "grid-template-areas",
        "grid-auto-flow",
        "grid-auto-rows",
        "grid-auto-columns",
        "grid-gap",
        "grid-row-gap",
        "grid-column-gap",
        "grid-area",
        "grid-row",
        "grid-row-start",
        "grid-row-end",
        "grid-column",
        "grid-column-start",
        "grid-column-end",
        "align-content",
        "align-items",
        "align-self",
        "justify-content",
        "justify-items",
        "justify-self",
        "order",
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index",
        "transform",
        "transform-origin",
        "transform-style",
        "backface-visibility",
        "perspective",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "visibility",
        "box-sizing",
        "table-layout",
        "caption-side",
        "empty-cells",
        "width",
        "min-width",
        "max-width",
        "height",
        "min-height",
        "max-height",
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "border-collapse",
        "border-spacing",
        "border",
        "border-width",
        "border-top-width",
        "border-right-width",
        "border-bottom-width",
        "border-left-width",
        "border-style",
        "border-top-style",
        "border-right-style",
        "border-bottom-style",
        "border-left-style",
        "border-color",
        "border-top-color",
        "border-right-color",
        "border-bottom-color",
        "border-left-color",
        "border-radius",
        "border-top-left-radius",
        "border-top-right-radius",
        "border-bottom-right-radius",
        "border-bottom-left-radius",
        "border-image",
        "border-image-source",
        "border-image-slice",
        "border-image-width",
        "border-image-outset",
        "border-image-repeat",
        "box-shadow",
        "background",
        "background-color",
        "background-image",
        "background-repeat",
        "background-attachement",
        "background-origin",
        "background-position",
        "background-size",
        "background-clip",
        "object-fit",
        "object-position",
        "opacity",
        "color",
        "font",
        "font-style",
        "font-variant",
        "font-weight",
        "font-stretch",
        "font-size",
        "line-height",
        "font-family",
        "font-feature-settings",
        "-webkit-font-smoothing",
        "text-align",
        "vertical-align",
        "text-indent",
        "text-transform",
        "text-decoration",
        "text-decoration-color",
        "text-decoration-style",
        "text-decoration-line",
        "text-overflow",
        "white-space",
        "letter-spacing",
        "word-spacing",
        "word-break",
        "word-wrap",
        "overflow-wrap",
        "text-shadow",
        "columns",
        "column-width",
        "column-count",
        "column-fill",
        "column-gap",
        "column-rule",
        "column-rule-width",
        "column-rule-style",
        "column-rule-color",
        "column-span",
        "break-after",
        "break-before",
        "break-inside",
        "list-style",
        "list-style-type",
        "list-style-image",
        "list-style-position",
        "counter-increment",
        "counter-reset",
        "content",
        "quotes",
        "pointer-events",
        "cursor",
        "outline",
        "outline-color",
        "outline-style",
        "outline-width",
        "resize",
        "transition",
        "transition-property",
        "transition-duration",
        "transition-timing-function",
        "transition-delay",
        "animation",
        "animation-name",
        "animation-duration",
        "animation-timing-function",
        "animation-delay",
        "animation-iteration-count",
        "animation-direction"
        ]
    ]
}
```

```ruby:test.scss
/*! test css */
/* hoge */
// fuga
#test {
  background-color: #fff;
  p {
    font-size: 1rem;
  }
  .test {
    display: flex;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;
    left: 0;
    top: 0;
  }
}
#hoge {
  width: auto;
  p {
    color: aqua;
  }
}

// --------------------------
@supports (display:block) {
/* utility ************************************************** */
// variable
$fzArr: 12,13,14,15,16,18,20,22,24,26,28,30;
$spacerArr: 0,2,4,8,12,16,20,24,28,32,36,40,60,80,100,120;

/* display ++++++++++ */
.u-d-i {
  display: inline !important;
}

/* flexible box / grid */
/* positioning */
/* transform */
/* float */
.u-fl {
  float: left !important;
}
.u-fr { 
  float: right !important;
}
.u-fln {
  float: none !important;
}

/* margin ++++++++++ */
.u-mg-a { margin: auto !important}
@each $spacer in $spacerArr {
  .u-mg#{$spacer} {
    margin: #{$spacer}px !important;
  }
}
/* top */
.u-mt-a { margin-top: auto !important}
@each $spacer in $spacerArr {
  .u-mt#{$spacer} {
    margin-top: #{$spacer}px !important;
  }
}
/* right */
.u-mr-a { margin-right: auto !important}
@each $spacer in $spacerArr {
  .u-mr#{$spacer} {
    margin-right: #{$spacer}px !important;
  }
}
/* bottom */
.u-mb-a { margin-bottom: auto !important}
@each $spacer in $spacerArr {
  .u-mb#{$spacer} {
    margin-bottom: #{$spacer}px !important;
  }
}
/* left */
.u-ml-a { margin-left: auto !important}
@each $spacer in $spacerArr {
  .u-ml#{$spacer} {
    margin-left: #{$spacer}px !important;
  }
}
/* padding ++++++++++ */
@each $spacer in $spacerArr {
  .u-pd#{$spacer} {
    padding: #{$spacer}px !important;
  }
}
/* top */
@each $spacer in $spacerArr {
  .u-pt#{$spacer} {
    padding-top: #{$spacer}px !important;
  }
}
/* right */
@each $spacer in $spacerArr {
  .u-pr#{$spacer} {
    padding-right: #{$spacer}px !important;
  }
}
/* bottom */
@each $spacer in $spacerArr {
  .u-pb#{$spacer} {
    padding-bottom: #{$spacer}px !important;
  }
}
/* left */
@each $spacer in $spacerArr {
  .u-pl#{$spacer} {
    padding-left: #{$spacer}px !important;
  }
}
/* font size ++++++++++ */
@each $fz in $fzArr {
  .u-fz#{$fz} {
    font-size: #{$fz / 10}rem !important;
  }
}
// --------------------------
/**/
}
```

```:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="./css/test.css">
<style>
.fieldwrap {
  display: block;
  margin: 0;
  padding: 20px;
  border: 0;
  background-color: #f6f6f6;
}
.field {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.field::after {
  display: block;
  clear: both;
  content: "";
}
.field .ttl {
  display: block;
  position: static;
  float: left;
  margin: 0;
  padding: 0;
}
.field .col {
  float: left;
  margin-left: 4px;
}
</style>
</head>
<body>
<div id="test">
  <p>test</p>
  <div class="test">div</div>
</div>
<div id="hoge" class="u-ml-10 u-fl">
  <p>hoge</p>
</div>

<fieldset class="fieldwrap">
  <fieldset class="field">
    <legend class="ttl">hoge</legend>
    <div class="col"><input type="text"></div>
  </fieldset>
  <fieldset class="field">
    <legend class="ttl">hoge</legend>
    <div class="col"><input type="text"></div>
    <p style="width:100%; clear:both;">hoge</p>
  </fieldset>

</fieldset>

</body>
</html>
```

## 参考

* [Cheat Sheet - Emmet Documentation](https://docs.emmet.io/cheat-sheet/)
* [emma.css](https://github.com/ruedap/emma.css/blob/master/README.md)
* [Emmet utility classes :Code Pen](https://codepen.io/Doron_B/pen/rezeBQ)
* [Emmet utility classes [#5] :Code Pen ](https://codepen.io/Doron_B/pen/PNJxMx)
* [css-utils](https://github.com/LukeAskew/css-utils/blob/master/utils.css)