gulpの覚書 | ワクガンス

gulpの導入からjsのコンパイルまで

jsのコンパイルとしてJSコードの圧縮を行ってみる。（厳密にはコンパイルではないが）。
もちろん圧縮以外にもES6→ES5などいろいろできる。

手順

Git Bashで検証。

1. npmコマンドを使えるようにしておく。
   npmの導入からjQueryのインストールまでの手順(Git bash for windows)
   
   
2. gulpコマンドを使えるようにするため、npmでgulpをグローバルインストールする。
   

   $ npm install -g gulp

   
   
   
3. cdコマンドでプロジェクトのパッケージインストール先にカレントディレクトリを移動する。
   
   
4. 「nmp init」コマンドでpackage.jsonを作成する。
   すでにpackage.jsonが存在するなら不要。
   参考：npmの導入からjQueryのインストールまでの手順(Git bash for windows)
   
5. npmコマンドでカレントディレクトリにgulpをインストールする。

   npm install --save-dev gulp

   カレントディレクトリのnode_modulesフォルダにgulpがインストールされる。
   package.jsonにもgulpのインストール情報が作成される。
   
   
6. gulpfile.jsファイルを作成する。

   $ touch gulpfile.js

   touchコマンドはファイルのタイムスタンプを変更するコマンドであるが、 存在しないファイル名を指定することで、空のファイルを新規作成することができる。
   
   
7. 今回、JSコードの圧縮を行いたいので「gulp-uglify」をインストールする。

   $ npm install --save-dev gulp-uglify

8. gulpfile.jsにgulp-uglify使用の記述する。

   
   	var gulp = require('gulp');
   	var uglify = require('gulp-uglify');
   	
   	gulp.task('test1', function () {
   		gulp.src('test/test2.js')
   			.pipe(uglify())
   			.pipe(gulp.dest('dist'))
   	});
   				

9. gulpを実行してJSコードを圧縮する。

   $ gulp test1

10. 圧縮前 test/test2.js

    	/**
    	 * TEST
    	 * @returns
    	 */
    	function test2(){
    		
    		var a = 1 + 1;
    		console.log(a);
    		
    		console.log('Hello gulp!!');
    	}
    	
    	test2();
    			

    
    圧縮後 dist/test2.js

    	function test2(){console.log(2),console.log("Hello gulp!!")}test2();
    			

11. 以上で終わり

2018-12-21

複数のJSファイルをコード圧縮しながら一つにまとめる

手順

1. JSファイル群を一つにまとめる「gulp-concat」と、JSコードを圧縮する「gulp-uglify」をインストールする。

   $ npm install --save-dev gulp-concat gulp-uglify

2. gulpfile.jsに記述

   
   	var gulp = require('gulp');
   	var concat = require('gulp-concat');
   	var uglify = require('gulp-uglify');
   	
   	gulp.task('test1', function () {
   		gulp.src('test/*.js')
   			.pipe(concat('one.js'))
   			.pipe(uglify())
   			.pipe(gulp.dest('dist'))
   	});
   

3. gulpを実行

   $ gulp test1

4. 実行前:test/*.js

   // test2.js
   function test2(){
   	console.log('TEST2 !');
   }
   test2();
   

   // test3.js
   function test3(){
   	console.log('TEST3 !');
   }
   test3();
   

   // test4.js
   function test4(){
   	console.log('TEST4 !');
   }
   test4();
   

   実行後 dist/one.js

   function test2(){console.log("TEST2 !")}function test3(){console.log("TEST3 !")}function test4(){console.log("TEST4 !")}test2(),test3(),test4();
   

2018-12-21

Gulpの更新（再インストール） | 2019年版

Gulpにはグローバルインストールとローカルインストールという２つの概念がある。
グローバルインストールはすべてのプロジェクト共通のGulp。
ローカルインストールはプロジェクト毎に用意するGulp。
両方インストールしておくと便利のようである。

1. 更新前のバージョン確認

   	$ gulp -v
   	CLI version: 2.2.0
   	Local version: Unknown
   				

2. 一旦、グローバルのGulpをアンインストール

   	$ npm rm --global gulp
   				

3. Gulpをグローバルインストール。

   	$ npm install -g gulp
   				

4. ローカルインストールのためcdコマンドで任意ディレクトリへ移動

   	$ cd git/cake_demo/gulp2019
   				

5. Gulpのローカルインストール

   	$ npm install --save-dev gulp
   				

   任意ディレクトリにnode_modulesフォルダされ中にGulpのモジュール群がインストールされる。
6. gulpのバージョン確認

   	$ gulp -v
   	CLI version: 2.2.0
   	Local version: 4.0.2
   				

7. gulpfile.jsを作成する

   	$ touch gulpfile.js
   				

8. gulp-concatをインストールする

   	npm install --save-dev gulp-concat
   				

9. gulp-terserをインストールする。 gulp-terserはjsをmin化する。

   	npm install gulp-terser --save-dev
   				

   gulp-terserの公式サイト
   
10. gulpfile.jsに下記を記述する。

    	var gulp = require('gulp');
    	var concat = require('gulp-concat');
    	var terser = require('gulp-terser');
    	
    	gulp.task('HelloGulp2', function () {
    		gulp.src('../app/webroot/js/my_lib/*.js')
    		.pipe(concat('all_for_one.min.js'))
    		.pipe(terser())
    		.pipe(gulp.dest('../app/webroot/js/my_lib/dist'));
    	});
    				

11. Gulpを実行してall_for_one.min.jsを生成する。

    	$ gulp HelloGulp2
    				

    「../app/webroot/js/my_lib/」ディレクトリ内にあるすべてのjsファイルをgulp-concatで一つのjsファイル(all_for_one.min.js)にまとめる。
    さらに一つにまとめたファイルをgulp-terserでmin化する。
    

2019-10-2

Gulp更新用のshell

下記のgulp_install.shを各プロジェクト内の任意ディレクトリに配置し、実行する。
グローバルへの再インストールおよび、ローカルへのインストールが行われる。

gulp_install.sh

	#!/bin/sh
	echo 'gulpといくつかのパッケージをインストールします。'
	
	echo 'グローバルのgulpを一旦、アンインストールします。'
	npm rm --global gulp
	
	echo 'グローバルへgulpを再インストールします。'
	npm install gulp -g
	
	echo 'ローカルへgulpをインストールします。'
	npm install --save-dev gulp
	
	echo 'gulp-concatをインストールします。'
	npm install --save-dev gulp-concat
	
	echo 'gulp-terserをインストールします。'
	npm install gulp-terser --save-dev
	
	
	echo "------------ インストール作業がすべて終わりました。"
	cmd /k
	

2019-10-2

xxx