3300.me

http://nodejs.org/   // node.js インストール
node -v  // node.js バージョン確認
npm -v  // npm(node package manager: https://www.npmjs.org/) バージョン確認

sudo npm install gulp -g  // gulp グローバルインストール
gulp -version  // gulp バージョン確認

npm list [package name]  // パッケージのバージョン確認
ex) npm list gulp-sass

sudo npm cache clean -f
sudo npm install -g n
sudo n latest
sudo n stable
sudo n 4.7.0

// enter every 1 line
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done

// enter every 1 line
sudo rm -rf /usr/local/lib/node \
   /usr/local/lib/node_modules \
   /var/db/receipts/org.nodejs.*

// delete npm
sudo rm -rf ~/.npm

1) mkdir project_name
2) cd project_name
3) npm init  // package.json 生成

---

project_name
└ package.json

---

// package.json
{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

---

4) sudo npm install gulp --save-dev
// gulpのローカルインストールと --save-dev でpackage.jsonの更新

---

project_name
├ node_modules/
└ package.json

---

// package.json
{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "gulp": "^3.9.0"
  }
}

5) vi gulpfile.js  // gulpfile.js 作成

---

project_name
├ gulpfile.js
├ node_modules/
└ package.json

---

// gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('The task of the default was done.');
});

gulp.task('typeA', function() {
  console.log('The task of the typeA was done.');
});

---

// タスクの実行

project_name $ gulp
[14:51:54] Using gulpfile ~/workspace/project_name/gulpfile.js
[14:51:54] Starting 'default'...
The task of the default was done.
[14:51:54] Finished 'default' after 80 μs

project_name $ gulp typeA
[14:51:59] Using gulpfile ~/workspace/project_name/gulpfile.js
[14:51:59] Starting 'typeA'...
The task of the typeA was done.
[14:51:59] Finished 'typeA' after 61 μs

sudo npm install gulp --save-dev
sudo npm install gulp-sass --save-dev

---

project_name
├ gulpfile.js
├ node_modules/
└ package.json

---

// package.json

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "gulp": "^3.9.0",
  "gulp-sass": "^2.0.3"
  }
}

---

// gulpfile.js

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

gulp.task('minify', function() {
  console.log('sass function');
});

gulp.task('default', ['sass'], function() {
  console.log('the task of the default was done.');
});

gulp.task('typeA', function() {
  console.log('the task of the typeA was done.');
});

---

// タスクの実行

project_name $ gulp
[15:27:26] Using gulpfile ~/workspace/project_name/gulpfile.js
[15:27:26] Starting 'sass'...
sass function
[15:27:26] Finished 'sass' after 74 μs
[15:27:26] Starting 'default'...
the task of the default was done.
[15:27:26] Finished 'default' after 26 μs

project_name $ gulp typeA
[15:27:30] Using gulpfile ~/workspace/project_name/gulpfile.js
[15:27:30] Starting 'typeA'...
the task of the typea was done.
[15:27:30] Finished 'typeA' after 49 μs

sudo npm install gulp --save-dev
sudo npm install gulp.spritesmith --save-dev
sudo npm install gulp-sass --save-dev
sudo npm install event-stream --save-dev // merge() を使うため
sudo npm install gulp-concat --save-dev // mapを結合するため
sudo npm install del --save-dev // 既存makeファイルの削除に使うため

---

temp_gulp/
│
├ base64/
├ css/
├ gulpfile.js
├ html/
├ img/
│  └ make/
│    ├ spr-en-***********.png
│    └ spr-ja-***********.png
├ js/
├ jsmod/
├ node_modules/
├ package.json
├ sass/
│  ├ project_name.scss
│  ├ _conf.scss
│  └ elements/
│    ├ _base.scss
│    ├ _module.scss
│    ├ lib/
│    │  ├ _reset.scss
│    │  └ _utility.scss
│    └ make/
│      ├ _concat.scss
│      └ spr/
│        ├ _spr_en.scss
│        └ _spr_ja.scss
└ sprite/
  ├ en/
  │   ├ blue.png
  │   ├ green.png
  │   └ red.png
  └ ja/
    ├ blue.png
    ├ green.png
    └ red.png

---

// gulpfile.js (no edit)

// 変数の定義
var gulp = require('gulp');
var del = require('del');
var sprite = require('gulp.spritesmith');
var merge = require('event-stream').merge;
var concat = require('gulp-concat');
var fs = require('fs');
var aPath = require('path');

// フォルダ取得の準備
var getFolders = function(dir) {
  return fs.readdirSync(dir).filter(function(file) {
      return fs.statSync(aPath.join(dir, file)).isDirectory();
  });
}

// image と map の生成
gulp.task('sprites', function() {

  // 既存makeファイルの削除
  del('img/make/*.png');

  // ファイル名の末尾につける乱数の生成
  var rdm = (new Date()).getTime();

  // フォルダの取得
  var folders = getFolders('sprite/');

  // spriteフォルダの中にフォルダがなければスキップ
  if(folders[0] !== undefined){ 

    // 複数フォルダ分のmapを同時にreturnするためにmergeが必要
    return merge( 

      folders.map(function(folder) {

        spriteOptions = {
          imgName: 'spr-' + folder + '-' + rdm + '.png',
          imgPath: 'img/make/spr-' + folder + '-' + rdm + '.png',
          cssName: '_spr_' + folder + '.scss',
          cssFormat: 'scss',
          cssOpts: {
            functions: false
          },
          cssVarMap: function(sprite) {
            sprite.name = folder + '-' + sprite.name;
          },
          cssSpritesheetName: 'spr-' + folders.indexOf(folder),
          algorithm: 'binary-tree',
          padding: 4
        }

        spriteData = gulp.src('sprite/' + folder + '/*.png').pipe(sprite(spriteOptions));

        spriteData.img.pipe(gulp.dest('img/make'));
        return spriteData.css.pipe(gulp.dest('sass/elements/make/spr'));
      })
    );
  }
});

// 生成したmapと_utility.scssを結合
gulp.task('scss_concat', ['sprites'], function() {

  return gulp.src([
      'sass/elements/make/spr/*.scss',
      'sass/elements/lib/_utility.scss'
    ])
    .pipe(concat('_concat.scss'))
    .pipe(gulp.dest('sass/elements/make'))
});

// sassコンパイル
gulp.task('sass', ['scss_concat'], function() {

  return gulp.src([
      'sass/**/*.scss',
      '!sass/elements/make/spr/*.scss',
      '!sass/elements/lib/_utility.scss'
    ])
    .pipe(sass())
    .pipe(gulp.dest('css'))
});


// タスクの順番制御はrun-sequenceモジュールでもできる

---

// project_name.scss (no edit)

@import "conf";
@import "elements/make/concat";

---

// _conf.scss (no edit)

// default value (フォルダ10個まで対応可能にする場合)
$spr-0: null !default; // no edit
$spr-1: null !default; // no edit
$spr-2: null !default; // no edit
$spr-3: null !default; // no edit
$spr-4: null !default; // no edit
$spr-5: null !default; // no edit
$spr-6: null !default; // no edit
$spr-7: null !default; // no edit
$spr-8: null !default; // no edit
$spr-9: null !default; // no edit

---

// _utility.scss (no edit)

// フォルダ10個まで対応可能にする場合
$spr: ($spr-0, $spr-1, $spr-2, $spr-3, $spr-4, $spr-5, $spr-6, $spr-7, $spr-8, $spr-9);

// プレイスホルダーセレクタを生成
@for $i from 1 through length($spr) {

  // それぞれのフォルダのmapが生成されてなかったらスキップ
  @if nth($spr, $i) != null {

    %spr-#{$i} {

      background: url('../' + nth(nth($spr, $i), 3));
    }

    @for $j from 1 through length(nth(nth($spr, $i), 4)) {

      $file: nth(nth(nth(nth($spr, $i), 4), $j), 10);

      %spr-#{$file} {

        @extend %spr-#{$i};

        width: nth(nth(nth(nth($spr, $i), 4), $j), 5);
        height: nth(nth(nth(nth($spr, $i), 4), $j), 6);
        background-position: nth(nth(nth(nth($spr, $i), 4), $j), 3) nth(nth(nth(nth($spr, $i), 4), $j), 4);
      }
    }
  }
}

// retina
@for $i from 1 through length($spr) {

  // それぞれのフォルダのmapが生成されてなかったらスキップ
  @if nth($spr, $i) != null {

    %spr-rtn-#{$i} {

      background: url('../' + nth(nth($spr, $i), 3));
      background-size: ceil(nth(nth($spr, $i), 1)/2) ceil(nth(nth($spr, $i), 2)/2);
    }

    @for $j from 1 through length(nth(nth($spr, $i), 4)) {

      $file: nth(nth(nth(nth($spr, $i), 4), $j), 10);

      %spr-rtn-#{$file} {

        @extend %spr-rtn-#{$i};

        width: ceil(nth(nth(nth(nth($spr, $i), 4), $j), 5)/2);
        height: ceil(nth(nth(nth(nth($spr, $i), 4), $j), 6)/2);
        background-position: ceil(nth(nth(nth(nth($spr, $i), 4), $j), 3)/2) ceil(nth(nth(nth(nth($spr, $i), 4), $j), 4)/2);
      }
    }
  }
}

---

// _module.scss (edit)

.foo01 {
  @extend %spr-ja-blue;
}
.foo02 {
  @extend %spr-ja-green;
}
.foo03 {
  @extend %spr-ja-red;
}
.foo04 {
  @extend %spr-rtn-en-blue;
}
.foo05 {
  @extend %spr-rtn-en-green;
}
.foo06 {
  @extend %spr-rtn-en-red;
}

// hide text は別途指定

---

// html

<div class="foo01">ja/blue</div>
<div class="foo02">ja/red</div>
<div class="foo03">ja/green</div>
<div class="foo04">en/blue</div>
<div class="foo05">en/red</div>
<div class="foo06">en/green</div>


  
ja/blue
  
ja/red
  
ja/green
  
en/blue
  
en/red
  
en/green

sudo npm install gulp --save-dev
sudo npm install gulp-base64 --save-dev
sudo npm install gulp.spritesmith --save-dev
sudo npm install gulp-concat --save-dev // mapを結合するため
sudo npm install gulp-sass --save-dev

---

temp_gulp/
│
├ base64/
│  ├ make/
│  │  └ base64.png
│  ├ yellow01.png
│  └ yellow02.png
├ css/
├ gulpfile.js
├ html/
├ img/
├ js/
├ jsmod/
├ node_modules/
├ package.json
├ sass/
│  ├ project_name.scss
│  ├ _conf.scss
│  └ elements/
│    ├ _base.scss
│    ├ _module.scss
│    ├ lib/
│    │  ├ _base64.scss
│    │  ├ _reset.scss
│    │  └ _utility.scss
│    └ make/
│      ├ _concat.scss
│      ├ base64/
│      │   ├ _map.scss
│      │   └ _url.scss
│      └ spr/
└ sprite/

---

// gulpfile.js (no edit)

// 変数の定義
var gulp = require('gulp');
var base64 = require('gulp-base64');
var sprite = require('gulp.spritesmith');
var concat = require('gulp-concat');
var fs = require('fs');
var aPath = require('path');

// pngファイルの有無を取得
fs.readdir('base64', function (err, list) {
  list.forEach(function (file) {
    if (aPath.extname(file) === '.png'){
      pngfiles = true;
    }
  })
})

// pngfileがあればsprite mapを生成
gulp.task('base64_map', function(pngfiles) {

  if(pngfiles){ // pngfileがなければスキップ

    var base64Options = {
      imgName: 'base64.png',
      imgPath: 'base64/make/base64.png',
      cssName: '_map.scss',
      cssFormat: 'scss',
      cssOpts: {
        functions: false
      },
      cssSpritesheetName: 'base64',
      algorithm: 'binary-tree',
      padding: 4
    }

    var base64Data = gulp.src('base64/*.png').pipe(sprite(base64Options));

    base64Data.img.pipe(gulp.dest('base64/make'));
    return base64Data.css.pipe(gulp.dest('sass/elements/make/base64'));
  }
});

// base64にエンコード
gulp.task('base64_url', ['base64_map'], function() {

  if(pngfiles){ // pngfileがなければスキップ

    return gulp.src('sass/elements/lib/_base64.scss')
      .pipe(base64())
      .pipe(concat('_url.scss'))
      .pipe(gulp.dest('sass/elements/make/base64'));
  }
});

// 生成したmapと_utility.scssを結合
gulp.task('scss_concat', ['base64_url'], function() {

  return gulp.src([
      'sass/elements/make/base64/*.scss',
      'sass/elements/lib/_utility.scss'
    ])
    .pipe(concat('_concat.scss'))
    .pipe(gulp.dest('sass/elements/make'))
});

// sassコンパイル
gulp.task('sass', ['scss_concat'], function() {

  return gulp.src([
      'sass/**/*.scss',
      '!sass/elements/make/base64/*.scss',
      '!sass/elements/lib/_base64.scss',
      '!sass/elements/lib/_utility.scss'
    ])
    .pipe(sass())
    .pipe(gulp.dest('css'))
});


// タスクの順番制御はrun-sequenceモジュールでもできる

---

// project_name.scss (no edit)

@import "conf";
@import "elements/make/concat";

---

// _conf.scss (no edit)

$base64-sprites: null !default;

---

// _base64.scss (no edit)

%base64 {
  background: url('./base64/make/base64.png');
}

---

// _utility.scss (no edit)

// scss生成により$base64-spritesが定義されていれば実行
@if $base64-sprites != null {

  @for $i from 1 through length($base64-sprites) {

    // プレイスホルダーセレクタを生成
    %base64-#{nth(nth(nth($base64, 4), $i), 10)} {

      @extend %base64;

      width: nth(nth(nth($base64, 4), $i), 5);
      height: nth(nth(nth($base64, 4), $i), 6);
      background-position: nth(nth(nth($base64, 4), $i), 3) nth(nth(nth($base64, 4), $i), 4);
    }

    // retina用
    %base64-rtn-#{nth(nth(nth($base64, 4), $i), 10)} {

      @extend %base64;

      width: ceil(nth(nth(nth($base64, 4), $i), 5)/2);
      height: ceil(nth(nth(nth($base64, 4), $i), 6)/2);
      background-position: ceil(nth(nth(nth($base64, 4), $i), 3)/2) ceil(nth(nth(nth($base64, 4), $i), 4)/2);
      background-size: ceil(nth($base64, 1)/2) ceil(nth($base64, 2)/2);
    }
  }
}

---

// _module.scss (edit)

.bar01 {
  @extend %base64-yellow01;
}
.bar02 {
  @extend %base64-rtn-yellow02;
}

// hide text は別途指定

---

// html

<div class="bar01">yellow01</div>
<div class="bar02">yellow02</div>


  
yellow01
  
yellow02

Download and Unzip temp_gulp.zip( Data of size is none. Reload please. ).

temp_gulp/
│
├ README
├ base64/
│  ├ yellow01.png
│  └ yellow02.png
├ css/
├ gulpfile.js
├ html/
├ img/
├ js/
├ jsmod/
├ package.json
├ sass/
│  ├ project_name.scss
│  ├ _conf.scss
│  └ elements/
│    ├ _base.scss
│    ├ _module.scss
│    └ lib/
│      ├ _base64.scss
│      ├ _reset.scss
│      └ _utility.scss
└ sprite/
  ├ en/
  │   ├ blue.png
  │   ├ green.png
  │   └ red.png
  └ ja/
    ├ blue.png
    ├ green.png
    └ red.png

---

// README

---------------------------------------------------
workspace environment setting
---------------------------------------------------
0) Introduce a virtual server to use php.
https://www.apachefriends.org/index.html

1) Install "node.js".
http://nodejs.org/

2) Install "gulp".
$ sudo npm install gulp -g

---------------------------------------------------
temp_gulp setting
---------------------------------------------------
1) Change label of folder name from 'temp_gulp' to 'your_project_name'.

2) Put this folder in your workspace.

workspace/
   └  your_project_name/

3) Enter top of this folder.

workspace/
   └  your_project_name/  <- current

4) install node_modules.
your_project_name $ sudo npm install

5) Run gulp.
your_project_name $ gulp i
your_project_name $ gulp


---

your_project_name/
│
├ README
├ base64/
│  ├ make/
│  │  └ base64.png
│  ├ yellow01.png
│  └ yellow02.png
├ css/
│  └ your_project_name.css
├ gulpfile.js
├ html/
├ img/
│  └ make/
│    ├ spr-en-***********.png
│    └ spr-ja-***********.png
├ js/
│  └ your_project_name.js
├ jsmod/
├ node_modules/
├ package.json
├ sass/
│  ├ your_project_name.scss
│  ├ _conf.scss
│  └ elements/
│    ├ _base.scss
│    ├ _module.scss
│    ├ lib/
│    │  ├ _base64.scss
│    │  ├ _reset.scss
│    │  └ _utility.scss
│    └ make/
│      ├ _concat.scss
│      ├ base64/
│      │   ├ _map.scss
│      │   └ _url.scss
│      └ spr/
│        ├ _spr_en.scss
│        └ _spr_ja.scss
└ sprite/
  ├ en/
  │  ├ blue.png
  │  ├ green.png
  │  └ red.png
  └ ja/
    ├ blue.png
    ├ green.png
    └ red.png

---

// options

$ gulp // default (compile css,js) 

$ gulp i // make sprite,base64 
$ gulp w // watch, livereload 
$ gulp r // minify css,js