● gulp-connectのインストール

npm install --save-dev gulp-connect

● ファイル構成

例えば下記のように「www」にhtmlファイル、「assets」以下にcssやjsファイルが入っている構成を想定します。

└── www
└── assets
    ├── css
    ├── font
    ├── img
    └── js

● gulpfile.js の編集

gulpfile.js に以下を追記します

//
// connect 設定
//
var connect = require('gulp-connect');
gulp.task('connect', function() {
    gulp.src("./").pipe(exec('open http://localhost:8080'));
    connect.server({
        root      : 'www',
        livereload: true
    });
});
// connect用LiveReload
gulp.task('reload-www', function () {
    gulp.src(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'])
        .pipe(connect.reload());
});
// connect用監視：ファイルが変更されたら'reload-www'を実行する
gulp.task('reload-watch', function () {
    gulp.watch(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'], ['reload-www']);
});
// タスク設定
gulp.task('connect-live', ['connect','reload-watch']);

● サーバの起動

gulp connect-live

これで、該当ファイルが更新された時に「高速に（少なくとも gulp-webserver よりは。）」LiveReloadします

VS Code で gulp-ejs を使って ejs をコンパイル（ビルド）する

・ 1. tasks.json の作成

何かの .ejs ファイルを開いた状態で

タスク → 既定のビルド タスクの構成

から、デフォルトの tasks.json を作成します

・ 2. tasks.json の編集

tasks.json を下記の内容で作成します。

{
    "version": "2.0.0",
    "options": {
        "cwd": "${workspaceRoot}/../"
    },
    "tasks": [
        {
            "label": "ejs",
            "type": "shell",
            "command": "gulp",
            "args": [
                "ejs"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
            
        }
    ]
}

タスク実行時に

    "options": {
        "cwd": "${workspaceRoot}/../"
    },

でディレクトリを変更しているので、適宜書き換えてください。

WEB系エンジニアにオススメのVisual Studio Code の拡張機能

VS Code

https://code.visualstudio.com/

● 爆速 自動リロードサーバ 「Live Server」

かなり高速です。gulpの「gulp-webserver」「gulp-connect」より速い。

・VS code Live Server の起動方法

・VS code で表示させたいフォルダを開く
・「Command + Shift + P」 → 「Live Server: Change Liver Server work space」からフォルダを選択
・「Command + Shift + P」 → 「Live Server: Open with Liver Server」でブラウザで 「http://127.0.0.1:5500」が開く
（または画面一番下のステータスバーのところ Go Live を押しても ok）

● ブックマーク機能をつける「Bookmarks」

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

● ケースを変換 （ PascalCase → camelCase ）

https://github.com/wmaurer/vscode-change-case

● = や : でコードを揃える「AutoAlign」

https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align

● 選択範囲の拡張を細かくする「expand-region」

https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region
インストール後に「expand-region」の動作を「Command + space」に割り当てると SublimeTextぽくなります。

● HTML + CSS 用インテリセンス（IntelliSense for CSS class names in HTML）

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

● SHIFT + return で ＜BR＞ コードを入力する （Insert ＜br＞ Tag）

● PHP用 インテリセンス

入力補完や（ command + shift + o → : ）でメソッド一覧を表示することができます。 PHP Intelephense の方が高速に動作するのでお勧めです。（remote で使用するにはライセンスキー購入が必要です。） https://intelephense.com/

● ファイル比較（diff）

比較したい二つのファイルを開いておいて「Command + shift + P」 → 「diff」でファイル比較を実行してくれます

● デフォルトのカラーテーマの色を変更する

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

を変更する

● ローカルのファイル名入力を自動で保管

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename

● 自動でバックアップ

https://marketplace.visualstudio.com/items?itemName=xyz.local-history

● SCSS (SASS) をコンパイル 「Live Sass Compiler」

次のような設定ファイルを「Code」→「基本設定」→「設定」 に記述しておきます。
.scss ファイルを開いて、画面一番下の Watch アイコンをクリックして、 .scss ファイルを保存すると自動的に 「 ../css/xxxxx.css 」「 ../css_min/xxxxx_min.css 」ファイルが生成されます。
なお Watch するのは style.sass などメインの scss ファイルのみでOKです。

      // Live Sass Compiler
      "liveSassCompile.settings.formats":[
        // css
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        },
        // css (minified)
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css_min/"
        }

● CSSを自動でフォーマット

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb

・インストール後の設定方法

1. 設定ファイルを下記サイトから作成する

http://csscomb.com/config

2. 任意のフォルダに csscomb.json で保存する

csscomb.json の 例

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "vendor-prefix-align": true
}

3. VS code の設定ファイルに csscomb.json の場所を記述して保存

      // CSS, scssファイル保存時にCSSCombを実行
      "csscomb.formatOnSave": true,
      // csscomb.json の場所を指定
      "csscomb.preset": "YOUR_FOLDER/VS_code_csscomb/csscomb.json"

● VS Codeでダブルクリックした時にハイフン（ - ）も選択されるようにする

「Code」 →「基本設定→「設定」を開き、
左側の設定見本の editor.wordSeparators を右側に追加し ダブルクリック時に選択されて欲しい文字を消す。

  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",

↓ （例： $ と - を消します）

      // ダブルクリック時に自動選択して欲しくない文字
      "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?" ,

● VS Code で HTMLタグ内を自動選択

キーボードショートカットの設定で editor.emmet.action.balanceOut を検索してそこに好きなキーを当てると使えるようになります。

● npmでパッケージのバージョンを調べる

npm show 【パッケージ名】 versions

● npmで現在インストール済みパッケージのバージョンを一覧で取得（1階層まで）

npm list --depth=0

● 現在インストール済みパッケージの新しいバージョンが存在するかどうか調べる

npm outdated

● ncu を使ってインストール済みパッケージの新しいバージョンが存在するかどうか調べる

ncuのインストール

npm install -g npm-check-updates

ncuの実行

ncu

ncu実行結果例

Using /HOGEHOGE/package.json
⸨░░░░░░░░░░░░░░░░░░⸩ ⠇ :
 gulp-autoprefixer  ^3.1.0  →  ^5.0.0 

package.json には バージョン「^3.1.0」で インストールしろと記述がありますが、最新バージョンは「^5.0.0 」ですよ。 という意味です。

● ncuを使ってインストール済みパッケージを新しいバージョンにupdateする

（例：gulp-autoprefixer を最新バージョンにします。全パッケージを最新にしたい時は引数なしで「 ncu -u 」で実行します）

ncu -u gulp-autoprefixer

このコマンドで package.json が書き換わります。
実際のアップデートは npm コマンドで行います。

npm update

● npmでパッケージのバージョンを調べる（バージョン指定）

次の例ではバージョン3以下のバージョンすべてを表示します

npm show 【パッケージ名@3】 versions

● npmで特定のバージョンのパッケージをインストールする

次の例ではバージョン3.19.0の eslint をインストールします

npm install eslint@3.19.0

● gulpfileの設定

gulpfile.js

var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
  gulp.src('./www/') //Webサーバーで表示するサイトディレクトリ
    .pipe(webserver({
      https: true,
      livereload: true,
      host: '0.0.0.0', // ← 0.0.0.0を設定すると同一ネットワーク内から見ることができます
    }));
});



● gulp webserverの起動

gulp webserver

● サーバーを立てたマシンのipアドレスを調べる（Macの場合）

システム環境設定 > ネットワーク > ipアドレス の欄を見てipアドレスを取得します

● iphoneからアクセスする

先ほど調べたipアドレスが192.168.0.10 の場合は iphoneから https://192.168.0.10:8000/ にアクセスします

gitが使用できないサーバの時はgulpからSFTPでファイルをアップロードできるようにするととても便利です。
gulp version4 では gulp-sftp がうまく動作しないので gulp-sftp-up4 を使用します。

● gulpでSFTPファイルアップロードする gulp-sftp-up4

gulp-sftp-up4のインストール

npm install --save-dev gulp-sftp-up4

gulp-sftpのGulp設定（gulpfile.js に記述）

var my_json = load_json(__dirname + '/gulp_ftp.json');
console.log( my_json );

gulp.task('sftp', function () {
    return gulp.src( my_json.file_options )
        .pipe(sftp( my_json.ftp_options ));
});

sftpの設定ファイル（ gulp_ftp.json ）

{
    "file_options" : [
        "www/**", 
        "!www/test/**", 
        "!www/**/___*"
    ] ,
    "ftp_options" : {
      "host"      : "xxx.yyy.com",
      "port"      : 22,
      "user"      : "hogehoge",
      "pass"      : "fugafuga",
      "remotePath": "/var/www/mysite/htdocs/"
    }
}

アップロードするファイルのルールは
ローカルの（./www）以下の全てのファイルを、サーバ上の（/var/www/mysite/htdocs/）へアップロードする
ローカルの（ ./www/test/）フォルダ以下はアップロードしない
ローカルの先頭アンダーバー3つで始まるファイル（ 例:___myfile.html ）はアップロードしない
です。

remotePath は 必ずスラッシュ（/）で始まる絶対パスで表記すること。 絶対パスでないとディレクトリ作成時に下記エラー

SFTP error or directory exists:

が出ます。

gulpのWEBサーバでPHPを動作させるには gulp-connect-php を使用します。
https://www.npmjs.com/package/gulp-connect-php
browser-sync と連携するには以下のようにします。

● gulp-connect-php , browser-sync のインストール

npm install --save-dev gulp
npm install --save-dev gulp-connect-php
npm install --save-dev browser-sync

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
 
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });
 
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});

このページのGulpプラグインを一気にインストールするには

npm install --save-dev gulp
npm install --save-dev gulp-uglify
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-rename
npm install --save-dev imagemin

gulp-uglify : JavaScriptを圧縮する
gulp-cssmin : CSSを圧縮する
gulp-rename : ファイル名をリネームする

● JavaScriptをコメントを残して圧縮（minify）する uglify

uglifyのインストール

npm install --save-dev gulp-uglify

uglifyのGulp設定（gulpfile.js に記述）

//
// JavaScript minify設定（uglify）
//
var uglify = require("gulp-uglify");
var rename  = require( 'gulp-rename' );
gulp.task('jsmin', function() {
    gulp.src('./js/*.js')
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./js_min'));
});

コメントを残す方法（ ! を以下のようにつける）

/*! 
  残したいコメント
*/

● CSSを圧縮（minify）する cssmin

cssminのインストール

npm install --save-dev gulp-cssmin

cssminのGulp設定（gulpfile.js に記述）

//
// CSS minify設定
//
var cssmin = require( 'gulp-cssmin' );
var rename = require( 'gulp-rename' );
gulp.task('cssmin', function () {
    gulp.src('./css/*.css')
    .pipe( cssmin() )
    // .pipe( rename({suffix: '.min'}) )
    .pipe( gulp.dest('./css_min') );
});

● CSSスタイルガイドジェネレーター frontnote

CSSスタイルガイドジェネレーターはCSSファイルからのドキュメントを生成するとても便利なものです。 frontnote以外にも kss-node, sc5-stylgeduige, などがありますが frontnoteは簡単で使いやすいのでおすすめです。

frontnoteのインストール

npm install frontnote --save-dev
npm install --save-dev gulp-frontnote

frontnoteのGulp設定（gulpfile.js に記述）

//
// CSSスタイルガイド frontnote 設定（ .scss ファイルからスタイルガイドを生成します）
//
var frontNote = require('gulp-frontnote');
gulp.task('frontnote', function () {
gulp.src('./scss/*.scss')
    .pipe(frontNote({
	    out: './frontnote',
    }));
});

● 画像（ jpg , png ）を圧縮する imagemin

imageminのインストール

npm install --save-dev gup-imagemin

imageminのGulp設定（gulpfile.js に記述）

// // jpeg , png 圧縮設定 // var imagemin = require('gulp-imagemin'); gulp.task('imagemin', function(){

gulp.src(['www/img/*.{png,jpg}', 'www/img/*/*.{png,jpg}'])
	.pipe(imagemin())
    .pipe(gulp.dest('www/img/'));

});

静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。（拡張子「.ejs」）
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル（全てのhtmlファイルを自動生成）』→『ブラウザでhtmlファイルを確認』 となります。
なお、node.js のインストールは割愛します。（あらかじめインストールしておいてください）

● gulp のインストール

npm install -g gulp

●1. ejs のインストール

HTML制作ディレクトリのトップからターミナルで

npm install --save-dev gulp-ejs@2.3.0

注意 : gulp-ejs はバージョン2系とバージョン3系で引数の渡し方が変わっています。
今回はバージョン2系を使用しています
なおバージョン確認コマンドは「npm info gulp-ejs」

●2. ejsをSublimeTextでコンパイル出来るようにビルドの設定をする。

gulp自身にファイルを監視させることもできますが、SublimeTextのビルドを使う方法を紹介します。
【ツール】→【ビルドシステム】→【ビルドシステム追加】で新規ファイルが開くので下記の項目を入力してファイル名 gulp.sublime-build で保存します。
保存するパスは

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/gulp.sublime-build

です。

"selector" : ["source.ejs"] の項目は必ず配列で記述すること。
( Mac OSX での例 )

{
    "cmd": ["gulp ejs"],
    "selector" : ["source.ejs"],
    "shell": true,
    "working_dir": "$project_path" ,
		"osx": {
		    "path": "/usr/local/bin:$HOME/.anyenv/envs/ndenv/shims:$HOME/.nodebrew/current/bin:$PATH"
		},
}

↑ SublimeTextにパスを渡しています

$HOME/.nodebrew/current/bin:  // nodebrew用

$HOME/.anyenv/envs/ndenv/shims // ndenv用

●3. ejsファイルを保存時に自動でコンパイルするように設定する

ファイル更新時に自動でコンパイルできるようにSublimeTextで設定します 【基本設定】→【Package Settings】→【SublimeOnSaveBuild】→【Settings - User】を選択してセッティングファイルを開く。
以下のコードをペーストして保存

{
    "filename_filter": "\\.(scss|sass|ejs|js|css|html)$",
    "build_on_save": 1
}

拡張子「scss」「sass」「ejs」「js」「css」「html」保存時に自動でビルドするよう設定します。（不要な拡張子は取り除くこと。）

●4. gulpの設定ファイル gulpfile.js の作成

HTML制作ディレクトリのトップにファイル gulpfile.js を下記の内容で作成します。

const gulp      = require('gulp');
const changed   = require('gulp-changed');
const sftp      = require('gulp-sftp');
const fs        = require('fs');
const debug     = require('gulp-debug');
const ejs       = require('gulp-ejs');
const gulp_data = require('gulp-data');
const rename    = require( 'gulp-rename' );

var load_json = function(filename) {
    return JSON.parse(fs.readFileSync(filename, 'utf8'));
};

const paths = {
    // root: './src',
    ejs: {
        src: './ejs/**/*.ejs',
        dest: './www/',
    },
};

// ========== ejs ==========
gulp.task('ejs', function() {
    return gulp.src(['./ejs/*.ejs', './ejs/*/*.ejs', '!./ejs/_*.ejs'])
        .pipe(changed(paths.ejs.dest))
        // .pipe(debug()) 
        .pipe(gulp_data(function(file) {
            return {
                'filename': file.path
            }
        }))
        .pipe(ejs({}))
        .pipe(rename({
            extname: '.html'
        }))
        .pipe(gulp.dest(paths.ejs.dest));
});

●5. SublimeTextでのビルド

・ejsファイルのコンパイル

ejsファイルは 拡張子 .ejs としてディレクトリ ejs において、SublimeTextで開いて command + b でコンパイルします。
一度コンパイルすると後は保存のたびに自動でコンパイルされます。

●6. EJSテンプレートで別ファイルをインクルード

共通部分を切り分けて呼び出します。
その時にパスも渡しています。

・呼び出す元のファイル（例）

<%- include('../_html_head.ejs', {r_path:'..'}) %>

・呼び出される側のファイル（例）

<link rel="stylesheet" href="<%= r_path %>/js/script.js">
<link rel="stylesheet" href="<%= r_path %>/css/style.css">

でインクルード時にパラメーターを渡すことができます。

●6. EJSテンプレートファイル名を取得する

<%= filename %>

と記述するとフルパスでファイル名が帰ります

/Users/hogehoge/Desktop/test/ejs/index.ejs

ただし、インクルードされるファイルに記述してもインクルード元ファイルのパスが返ります。

下記のように使うと便利です

<% var flag = filename.split('/')[filename.split('/').length - 1].replace('.ejs','') %>
<%= flag %>

引用 : http://bit.ly/1Oz6EJX

●6. EJSテンプレートでコメントを入力する

コメントは

<% /* ここはコメントです */ %>

と入力します

ejsの使い方 : https://github.com/tj/ejs
EJS便利な構文 : http://bit.ly/1XiajOj
Gulp + EJS + JSONを使用してhtmlを量産 : http://bit.ly/1WZFQ8c