Photoshop - Photoshop CCでの画像の書き出し

Slicyを使ってスライスをするのが一番手っ取り早いなんて思っていたのですが、
PhotoshopCCにはさらに楽になる方がありました！

レイヤー名に〜.png, 〜.jpgとつけるだけ

ファイル　＞　生成　＞　画像アセットをオン。
あとはレイヤー名につけたい画像名と拡張子をつけてあげてPSDを保存するだけで、 PSDと同じ階層に画像が保存されます。

便利すぎて泣ける。

いまさらBower入門

Gulpでタスクも自動化したところで、Cocoapodsのようにライブラリも管理したくなった。
そのため、いまさらBowerに手を出しました。

Bowerとは？

Twitter社製のフロントエンド用のパッケージマネージャー

なにができるのか？

・ライブラリのインストール
・ライブラリのバージョン管理
・管理するライブラリを減らす など。
いちいちライブラリをDLする作業がなくなるのは非常に良いことです。

Bowerのインストール

Node.jsをインストールした後、Bowerをグローバルインストールします。

npm install bower -g

Bower init

プロジェクトフォルダのルートまで移動して、Bower initしましょう。

cd PROJECT_ROOT_PATH
bower init

したらば、npm initと同様に対話形式で話が進みます。
質問内容は以下のリンクを参考にしたら良いと思います。

qiita.com

bower.json

npmのpackage.jsonと同様にbower.jsonがフォルダに確認できます。

jQueryのバージョン2系をインストール

私がフロントエンジニアを離れているうちにjQueryもいつのまにか2が・・・。
ということでjQueryの2系をbowerを使ってインストールしてみます。

bower install jquery#2 --save

--saveをつけておくとbower.jsonにdependencies(依存関係)が追記されます。
bower.json内に dependencies が記述されていれば、
指定しなくとも「bower install」だけでライブラリがインストールされる。

--save-devと--saveの違いについては、以下のリンクをご参考に。 nakagaw.hateblo.jp 開発に必要な物は--save-dev、
プロジェクトの実行に必要なものは--save
という関係だけ覚えておけば問題ない気もする。

読み込もう

下のように書いて読み込みこんでもいいと思います。

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

しかし、なんかイケてない感がある方は gulpを利用して、以下のように一つにまとめてlib.jsなんかに書き出しとかしたいと思います。

<script type="text/javascript" src="/js/lib.js"></script>

Gulp + Bowerだ！

もう散々色んな所で紹介されているのではしょります。 僕はこんな感じでbower_componentsの中をまとめてます。

gulp.task('bower', function(callback) {
  return runSequence(
    'concat.bower',
    'minify.bower',
    callback
  );
})

var files = mainBowerFiles()
gulp.task('concat.bower', function() {
  console.log(files)
  return gulp.src(files)
    .pipe(concat('lib.js'))
    .pipe(gulp.dest('_build/tmp/js'))
})

gulp.task('minify.bower', function() {
  return gulp.src('_build/tmp/js/lib.js')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(uglify({preserveComments: 'license'}))
    .pipe(gulp.dest('./js'));
})

ソースはこちら

github.com

いまさらGulp(4)

そんなこんなで二日間Gulpfile.jsを調整していたのですが、
どうにか自分が納得いくGulpfile.jsができました。

'use strict';

var gulp        = require('gulp');
var connect     = require('gulp-connect');
var plumber     = require('gulp-plumber');
var notify      = require('gulp-notify');
var concat      = require('gulp-concat');
var sass        = require('gulp-sass')
var pleeease    = require('gulp-pleeease');
var uglify      = require('gulp-uglify');
var runSequence = require('run-sequence');
var del         = require("del");


gulp.task('default', ['connect', 'watch'])

gulp.task('watch', function() {
  gulp.watch('./_build/scss/**', ['css']);
  gulp.watch('./_build/js/**', ['js']);
  gulp.watch('./*.html', ['reload']);
});

gulp.task('connect', function() {
  connect.server({
    root: './',
    livereload: true
  });
})

gulp.task('reload', function () {
  gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('css', function(callback) {
  return runSequence(
    'clean.css',
    'compile.css',
    'concat.css',
    'optimize.css',
    'reload',
    callback
  );
})

gulp.task('js', function(callback) {
  return runSequence(
    'clean.js',
    'concat.js',
    'minify.js',
    'reload',
    callback
  );
})

gulp.task('concat.js', function() {
  return gulp.src('./_build/js/**')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('./_build/tmp/js'));
});

gulp.task('minify.js', function() {
  return gulp.src('./_build/tmp/js/*.js')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(uglify({preserveComments: 'some'}))
    .pipe(gulp.dest('./js'));
});

gulp.task('compile.css', function() {
  return gulp.src('./_build/scss/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(sass({style: 'expanded'}))
    .pipe(gulp.dest('./_build/tmp/css'))
})

gulp.task('concat.css', function() {
  return gulp.src('./_build/tmp/css/*.css')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(concat('layout.css'))
    .pipe(gulp.dest('./css'))
})

gulp.task('optimize.css', function() {
  return gulp.src('./css/*.css')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(pleeease({
      autoprefixer: true,
      minifier: false,
      mqpacker: true
    }))
    .pipe(gulp.dest('./css'))
})

gulp.task('clean', function(callback) {
  return runSequence(
    'clean.js',
    'clean.css',
    callback
  );
})

gulp.task('clean.css', function() {
  del(['./_build/tmp/css/*.css'])
})

gulp.task('clean.js', function() {
  del(['./_build/tmp/js/*.js'])
})

解説はとくになし。

github.com

いまさらGulp(3)

３回目に引き続き、今度はsassのコンパイルをGulpに任せたい。

scssのコンパイル

scssをcssに変換するには、gulp-sassというプラグインを使用します。

インストール

npm install --save-dev gulp-sass

gulpfile.js

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

gulp.task('sass', function() {
  console.log('--------- sass ----------');
  return gulp.src('_build/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'))
})

すばらしい。

上からマリコ、いまさらGulp(2)

さあ1回目にひきつづき、Gulpにランしてもらうタスクを書いていきます。
やりたいことはいくつもありますが、まずはJSの圧縮と結合からやってみましょう。

はじめに

gulpfile.jsは都度必要なプラグインをnpm install して、
node_moduleディレクトリにインストールします。
それらを以下のように読み込んであげてから使うといった感じです。

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

1. JSの圧縮

gulpでjsファイルを圧縮するには、gulp-uglifyというプラグインを使用します。

インストール

npm install --save-dev gulp-uglify

gulpfile.js

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

// 「jsの圧縮」タスクを登録
gulp.task('uglify', function() {
  console.log('--------- uglify ----------');
  return gulp.src('_build/js/**')//_build/js/以下のファイルを全て圧縮
    .pipe(uglify({preserveComments: 'license'}))//ライセンス表記は圧縮しない
    .pipe(gulp.dest('js'));//エクスポート先
});

2. JSの結合

gulpでjsファイルを結合するには、gulp-concatのプラグインを使用します。

インストール

npm install --save-dev gulp-concat

gulpfile.js

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

gulp.task('concat', function() {
  console.log('--------- concat ----------');
  return gulp.src('_build/js/**')
    .pipe(concat('main.min.js'))//結合後の名前
    .pipe(gulp.dest('js'));//どこにエクスポートするか
});

同時に結合と圧縮

そもそも別々でやる必要があまりないので同時にやりたい。

gulp.task('js', ['concat', 'uglify']);

上からマリコ、いまさらGulp(1)

静的サイトジェネレーターもいいが、
やはりタスクランナーのほうが今回の案件にマッチしそうだったので、 しぶしぶ、いまさらGulpについて調べてみました。

Gulp.jsとは？

Node.jsのStreamAPIを利用したビルドシステム。 ローカル環境で動くサーバーサイドJavascript環境(Node.js)のStreamAPIを利用してビルドする。

なにができるのか？

・JSの圧縮
・SASSのコンパイル
・ファイルの監視/自動化
・ライブリロード
など

Node.jsのインストール

Node.jsを利用したビルドシステムのため、当然Node.jsをインストールする必要がある。
https://nodejs.org/en/

package.jsonを作成する

package.jsonはprojectのpackageを管理するためのファイル。
CocoapodでいうところのPodfile的なものだと解釈しています。

作り方は２通りあって、ひとつ目は自分でこつこつ書くこと。 ふたつ目はプロジェクトのディレクトリまで移動して以下のコマンドを叩くことです。

npm init

このコマンドを叩くと、対話形式でpackage.jsonが生成されます。
ここもCocoapodと大差無いですね。

gulpをインストールする

gulpのインストールは通常、ローカルとグローバルの両方にインストールする必要がある。
グローバルにインストールされたgulpは、ローカルにインストールしたgulpを実行するのが役割です。

グローバルな場所にgulpをインストールします。(グローバルインストール)

npm install -g gulp

プロジェクトのフォルダに移動し、gulpをインストールします(ローカルインストール)

npm install -D gulp

するとプロジェクトの内部に、node_modulesというフォルダが現れています。
そして、package.jsonには以下のフィールドが追加されました。

"devDependencies": {
    "gulp": "^3.9.1"
}

.gitignoreを設定しよう(任意)

package.jsonのある場所まで移動して、ターミナルにて"npm install" を叩けば、
"devDependencies"や"Dependencies"に記述されているパッケージがインストールされ、
パッケージ群(node_module)が生成されます。 そのためgitで管理する場合、node_module以下はコミットする必要がないと考えてもいいと思います。

//.gitignore

node_modules

タスクを走らせてみよう

さあここまできたら、やっとタスクが走らせられる。

gulpfile.jsを作ろう

プロジェクトのルート階層にgulpfile.jsを作成します。
このファイルの中にタスクの中身を書いていきます。

Run!Run!Run!

ターミナルで以下を叩きましょう

gulp

これでやっと僕もガルパー(gulper)です。そんな言葉はあるのかな。

静的サイトジェネレーターについて調べた(1)

仕事で久しぶりにサイトのコーディングに勤しむことになったので、
最近流行っていると耳にした静的サイトジェネレーターとやらに挑んでみた。

静的サイトジェネレーターとは？

静的サイトジェネレータとは、静的サイトを効率的に制作するためのツール。 好みの言語で開発して納品用に HTML / CSS / JavaScript といった形式に変換してくれる。

これはいいですね。
gulpやgruntやらに取り残された私やそこのアナタにとっても、救世主になってくれそうです。

さあ、はじめよう。

まあ使ってみないと正直わからないところがあるので、
いろいろあるなかで「Hugo(http://gohugo.io/)」を選択して使ってみたいと思います。
読み方はヒューゴであってるのかな？プロレスラーみたいですね いまをときめくGo言語製で、色んな所をみたところ最も早いとのこと。 （この時点でなにが早いのかはわかっていないがおそらくビルド）

インストール

brew install hugo

Homebrewをいれてとっとこインストールしましょう。

サイトの初期化

適当なディレクトリに移動して、以下のコマンドを叩きます。

hugo new site サイト名

すると、サイト名のディレクトリが生成され、中には以下のファイルが含まれています。 ・archetypesフォルダ
・contentフォルダ
・dataフォルダ
・layoutsフォルダ
・staticフォルダ
・themesフォルダ
・config.toml

config.tomlファイルの編集

ファイルの中身は、以下のようになっています

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

このままではアレなので、自分の環境に合わせましょう

baseurl = "公開するサイトのURL"
languageCode = "ja"
title = "公開するサイトのタイトル"

とりあえず今日はここまで。