読者です 読者をやめる 読者になる 読者になる

復習日記

勤務時間内で理解できなかったことやつまづいたことをまとめていく予定。

node.js入れてみる

環境

mac

入れるもの

  • nodebrew
  • npm
  • node
  • gulp

参考、というかまんま

Node.jsとgulpをインストールして使うまでの入門記事 | コムテブログ

nodebrew

node本体のバージョン管理ツールwindowsの場合はnodist)

nodeを複数バージョン切り替えて使用できる

$ curl -L git.io/nodebrew | perl - setup

自分の環境にはすでに入っていたっぽい

nodeも入っていた

$ nodebrew ls
v0.12.0

current: v0.12.0
$ node -v
v0.12.0
$ 

npm

nodeのモジュールのバージョンをpackage.json使って管理するのがnpm

node.jsインストールするとついてくる

mkdir sample-project
cd sample-project
npm init

上記コマンド実行するとsample-project配下にpackage.jsonがつくられる

{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm install パッケージ名 でインストールできる

-gつけるとグローバルインストール

何もつけないとプロジェクト内にインストール

gulp

フロントエンド用の便利ツール

プロジェクト外からもパスを通しておきたいのでグローバルインストールもしておく。

npm install -g gulp
npm install gulp

$ gulp -v
[00:33:35] CLI version 3.9.0
[00:33:35] Local version 3.9.0

gulp plugin

プラグインいろいろある

jsのminifyや画像ファイルの圧縮など

ブラウザの同期とリロードのgulp watchが便利かな

npm install gulp-cssbeautify

gulpfile.jsを用意

var gulp = require('gulp'),
    cssbeautify = require('gulp-cssbeautify');

gulp.task('cssbeautify', function() {
    return gulp.src('css/style.css')
        .pipe(cssbeautify())
        .pipe(gulp.dest('css'));;
});

gulp.task('hello', function() {
     console.log('hello world');
});

元のcss/style.css

h1{
font-size: 20px;
color: blue;
}

gulp コマンドを打つと

gulp cssbeautify

cssが整形される

h1 {
    font-size: 20px;
    color: blue;
}

先ほどのgulpfile.jsの定義の通り、gulp helloと打つとhello worldが返ってきます。