gulp
https://developers.google.com/web/ilt/pwa/introduction-to-gulp 를 참고하면 도움이 될듯.
gulp는 Node와 npm이 필요하다.
Node와 npm의 설치여부는 node -v 를 실행해보고 npm -v를 실행해보면 된다.
Node와 npm은 설치되어 있고, Gulp command line tool을 설치해야하는데, 에러다 .. sudo를 같이 써줘야 하나보다.
iMac2008ui-iMac:~ poscoict$ node -v
v8.9.1
iMac2008ui-iMac:~ poscoict$ npm -v
5.5.1
iMac2008ui-iMac:~ poscoict$ npm install --global glup-cli
npm ERR! code E404
npm ERR! 404 Not Found: glup-cli@latest
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/poscoict/.npm/_logs/2017-12-06T07_55_37_109Z-debug.log
iMac2008ui-iMac:~ poscoict$
iMac2008ui-iMac:~ poscoict$ sudo npm install --global glup-cli
Password:
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@1.4.0
added 139 packages in 10.527s
iMac2008ui-iMac:~ poscoict$
위와 같이 Gulp command line tool이 설치되었으면..
프로젝트를 생성한다.
원하는 작업영역으로 이동해서 npm init을 실행하면 프로젝트가 생성된다.
대부분 엔터키만 입력하면 되고, 마지막에 yes라고만 입력하면 프로젝트가 생성되고, package.json파일이 생성되었음을 알 수 있다.
iMac2008ui-iMac:test poscoict$ pwd
/Users/poscoict/Documents/test
iMac2008ui-iMac:test poscoict$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/poscoict/Documents/test/package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
iMac2008ui-iMac:test poscoict$
Gulp와 Node는 대부분의 기능을 plugin(package)에 의존하므로 npm install pluginName --save-dev 이라는 명령어로 plugin(package)를 설치하면 된다.
--save-dev 가 있기 때문에 package.json파일이 알아서 업데이트 된다.
gulp라는 plugin(package)를 설치하기 위해
npm install gulp --save-dev을 실행하면 되고,
plugin(package) 설치 전후의 package.json 파일 내용은 다음과 같음을 알 수 있다.
iMac2008ui-iMac:test poscoict$ ls -al
total 8
drwxr-xr-x 2 poscoict staff 102 Dec 6 17:04 .
drwx------+ 4 poscoict staff 204 Dec 6 17:04 ..
-rw-r--r-- 1 poscoict staff 200 Dec 6 17:04 package.json
iMac2008ui-iMac:test poscoict$ cat package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
iMac2008ui-iMac:test poscoict$ npm install gulp --save-dev
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.
+ gulp@3.9.1
added 186 packages in 10.88s
iMac2008ui-iMac:test poscoict$ cat package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1"
}
}
iMac2008ui-iMac:test poscoict$ ls -al
total 112
drwxr-xr-x 3 poscoict staff 170 Dec 6 17:14 .
drwx------+ 4 poscoict staff 204 Dec 6 17:04 ..
drwxr-xr-x 166 poscoict staff 5644 Dec 6 17:14 node_modules
-rw-r--r-- 1 poscoict staff 51281 Dec 6 17:14 package-lock.json
-rw-r--r-- 1 poscoict staff 249 Dec 6 17:14 package.json
iMac2008ui-iMac:test poscoict$
node_modules이라는 폴더가 생성되었음이 확인되고. node_modules에 package가 설치되었다는 의미니까, 준비 완료다~~
모든 gulp 코드는 gulpfile.js 파일 작성하므로.. gulpfile.js파일을 만들어서 task를 작성하면 된다.
iMac2008ui-iMac:test poscoict$ touch gulpfile.js
iMac2008ui-iMac:test poscoict$ ls -al
total 112
drwxr-xr-x 3 poscoict staff 204 Dec 6 17:26 .
drwx------+ 4 poscoict staff 204 Dec 6 17:04 ..
-rw-r--r-- 1 poscoict staff 0 Dec 6 17:26 gulpfile.js
drwxr-xr-x 166 poscoict staff 5644 Dec 6 17:14 node_modules
-rw-r--r-- 1 poscoict staff 51281 Dec 6 17:14 package-lock.json
-rw-r--r-- 1 poscoict staff 249 Dec 6 17:14 package.json
iMac2008ui-iMac:test poscoict$ vi gulpfile.js
iMac2008ui-iMac:test poscoict$ cat gulpfile.js
var gulp = require('gulp');
gulp.task('hello', function(){
console.log('Hello, World!');
});
iMac2008ui-iMac:test poscoict$
hello라는 task를 만들었고, 실행해보려면 gulp hello라고 하면 된다.
iMac2008ui-iMac:test poscoict$ gulp hello
[17:30:07] Using gulpfile ~/Documents/test/gulpfile.js
[17:30:07] Starting 'hello'...
Hello, World!
[17:30:07] Finished 'hello' after 168 μs
iMac2008ui-iMac:test poscoict$