2016-06-20

いまさら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'))
})

すばらしい。

2016-06-20

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

Gulp

さあ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']);

2016-06-20

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

Gulp

静的サイトジェネレーターもいいが、
やはりタスクランナーのほうが今回の案件にマッチしそうだったので、しぶしぶ、いまさら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)です。そんな言葉はあるのかな。

2016-06-18

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

HTML Hugo CSS Javascript

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

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

静的サイトジェネレータとは、静的サイトを効率的に制作するためのツール。好みの言語で開発して納品用に 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 = "公開するサイトのタイトル"

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

2016-06-18

Swift - Swift2.0でもstringByAppendingPathComponentが使いたい

StringをNSStringに変換してあげれば使うことができます。

NSString(string: "hoge").stringByAppendingPathComponent("fuga")
=> hoge/fuga

参考:

qiita.com

2016-06-18

Swift - Dictionaryを保存する

サーバーからのレスポンスをキャッシュしたい時なんぞに、
こういったことが必要になることがあります。

NSDictionaryをNSDataに変換

NSDictionaryをplistに変換しても良かったのだけれど、
何故か私が渡すDictionaryでは、writeToFileがfalseを返すばかりで失敗するため、
いろんなところを参考にして、NSDataに変換して保存する方法をとった。
まあplistだと中身を見ることができてしまうので、バイナリに変換するのがいいんでないかなと思います。

NSKeyedArchiverをつかってアーカイブ・アンアーカイブ

NSKeyedArchiverをつかってNSDictionaryをバイナリに変換します。

// アーカイブ
let data = NSKeyedArchiver.archivedDataWithRootObject(dictionary)

// アンアーカイブ
let dictionary = NSKeyedUnarchiver.unarchiveObjectWithData(data)

NSFileManagerで任意のディレクトリに保存

あとは仕様にそった場所にNSFileManagerクラスで保存してあげればよい。

2016-06-18

iOS - シュミレーター内のアプリディレクトリを確認する方法

NSFileManagerなんかでアプリ内ディレクトリに保存したものを確認したい時は、
以下のディレクトリを確認すれば良い。

/Users/(ユーザー名)/Library/Developer/CoreSimulator/Devices/(シュミレーターID)/data/Containers/Data/Application/(udid)

Developerフォルダ

Developerフォルダは不可視になっているので、
ターミナルで行きたい場所までcdして、$open . でファインダーを開いてやるとよいです。

その他

シュミレーターIDが分からなければWindow > Devicesを確認すれば問題なし。 udidはどこをみたらいいのかイマイチわからないため、フォルダ内Snapshotsの中身をみて判断するしかなさそうです。