HTML作成の効率化（4）-実践編

1. 書き出し用フォルダを作成 プロジェクトフォルダ内にtmpフォルダを作成します
2. コマンドプロンプト（mac:ターミナル）を立ち上げ、1の階層に移動します
   例 d: cd work\TestProject\tmp
3. package.json を作成 npm init を入力。表示される質問に答えます
4. すべて答え終わったら、1の階層にnpm:package.jsonが生成されていることを確認します

1. https://www.npmjs.com/ で導入したいパッケージを検索します
2. コマンドプロンプトで以下のように入力し、インストールします。

   npm:パッケージのインストール

   npm install パッケージ名 --save-dev

3. 先の手順で作成したpackage.jsonが更新されていることを確認してください。
   この「devDependencies」内にインストールされたパッケージとバージョンが追加されています。

   npm:package.json例

   {
   "name": "TestProject",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
     "gulp": "^3.9.1"
   },
   "devDependencies": {
     "@frctl/fractal": "^1.1.7",
     "gulp": "^3.9.1",
     "gulp-cheerio": "^0.6.3",
     "gulp-ejs": "^3.1.2",
     "gulp-imagemin": "^4.1.0",
     "gulp-notify": "^3.0.0",
     "gulp-pleeease": "^2.0.2",
     "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.6.1",
     "gulp-svg2png": "^2.0.2",
     "gulp-svgmin": "^1.2.4",
     "gulp-svgstore": "^6.1.1",
     "gulp-template": "^5.0.0",
     "gulp-uglify": "^3.0.0",
     "imagemin-mozjpeg": "^7.0.0",
     "imagemin-pngquant": "^5.1.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "gulp": "gulp",
     "start": "gulp"
   },
   "author": "",
   "license": "ISC",
   "fractal": {
     "main": "fractalfile.js"
   }
   	  }

プロジェクトメンバー(Bさん)にこのpackage.jsonを渡し、それぞれのローカル環境にインストールしてもらえば全く同じ環境が構築されます。

1. tmpフォルダ直下に gulpfile.js を作成します
2. 「パッケージモジュールのインストール」でインストールしたパッケージごとの設定に沿って設定します
3. それぞれインストールしたAPIの書き方に沿って処理させる内容を設定していきます。
   処理内容の例：

   gulp.task('js', function() {
   	return gulp.src(JS_SRC)
   .pipe(plumber())
   .pipe(uglify())
   .pipe(rename({extname: '.min.js'}))
   .pipe(gulp.dest(JS_DEST))
   });

   書き方はnpmに詳しく載っているので初めてでも簡単に追加することができるでしょう。

4. package.json の devDependencies": {}内にインストールされたAPIが追加されていることを確認してください

Aさんの作ったパッケージ管理ファイルをもとにモジュールをインストールする

1. プロジェクトフォルダ内にtmpフォルダを作成し、直下にpackage.jsonを格納します
2. コマンドプロンプトで以下のように入力し、インストールします。

   npm install --save-dev

   package.json に書かれたパッケージがそのバージョンでインストールされます。

Aさんの作ったパッケージ設定ファイルをコピー

1. プロジェクトフォルダ内にtmptmpフォルダを作成し、直下にAさんの作ったgulpfile.jsを格納します。おわり！

これで全員同じ環境になりました。

Bさんはファイルをコピーしてコマンドを一行打っただけです。たったこれだけで、全員同じ環境・レベルでコーディングができるようになるのです。

とても長いです。
これほどたくさんの機能を使うプロジェクトはそうありませんが、出来ることはたくさんあるということがおわかりいただけたでしょうか？

もちろん出来ることはこれが全てではありません。プロジェクトによって必要な処理は様々です。

もうEmmetなしのHTMLコーディングは無理!?
慣れるとGUIのHTMLコーディングアプリが鈍く感じるくらいです。

WEBSASの場合、HTMLコーディング後開発工程が入ることがほとんどです。
柔軟な対応が求められる工程のため、この段階で直接HTMLやCSSが修正されることがあります。デザイン段階では不要でも、開発工程で使用する汎用的で幅広いクラスが必要です。
いわば「WEBSASフレームワーク」

これを実現するためにSassの機能をほぼフルで利用しています。

なるべく軽量に書き出しも軽快に、を目標に今後乗り換えを検討しています。

外部と連携を取る際、Gulpファイル一式をお預かりする機会も多くなりました。
プラグインの多さは圧倒的です。

今後npmに移行していく予定です。重くなりがちな処理の改善が目下の課題……

最新のトレンドからは少しばかりずれますが、安定して使用でき、かつ関係各位とも連携の取りやすい「2018上半期 WEBSAS スタンダード」とも言うべき組み合わせが以下の4つです。

• 爆速コーディング Emmet
• CSS命名規則 FLOCSS
• CSSプリプロセッサー Sass
• タスクランナー Gulp

かつてはBootstrapなどCSSフレームワークを導入するプロジェクトもありました。学習リソースがふんだんにあり、コーディングフェーズを終えた後も継続してクオリティを保つ手段として、開発現場から支持された手法です。

今や命名規則を制定しスタイルガイドを作ることで学習コストの懸念も払拭できました。内製フレームワークを導入する下地が出来たのでは？と思います。

開発環境については、2018年に構築