Gulp이란?

mkdir gulp-tutorial
cd gulp-tutorial
npm init

% mkdir gulp-tutorial
% cd gulp-tutorial
% 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 init` 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: (gulp-tutorial)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/user/develop/tutorial/nodejs-tutorial/gulp-tutorial/package.json:

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


Is this OK? (yes)

npm install gulp -g

% npm install gulp -g
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 354 packages in 24s

12 packages are looking for funding
  run `npm fund` for details

% gulp --version
CLI version: 2.3.0
Local version: Unknown

% pwd
/Users/user/develop/..생략../gulp-tutorial

npm install gulp --save-dev

% npm install gulp --save-dev
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 354 packages, and audited 355 packages in 20s

12 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

% gulp --version
CLI version: 2.3.0
Local version: 4.0.2

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

% npm install --save-dev gulp-cssmin gulp-rename
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uuid@1.4.2: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated graceful-fs@2.0.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

added 70 packages, and audited 425 packages in 10s

15 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (1 low, 8 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssminify', async function () {
  gulp.src('style.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('.'));
});

.content {
  width: 100%;
  height: 200px;
  padding: 5px 10px 5px 10px;
}

gulp cssminify

% gulp cssminify
[00:24:39] Using gulpfile ~/develop/..생략../gulp-tutorial/gulpfile.js
[00:24:39] Starting 'cssminify'...
[00:24:39] Finished 'cssminify' after 4.75 ms

% ls -al
total 376
drwxr-xr-x    8 user  staff     256  5 11 00:24 .
drwxr-xr-x    5 user  staff     160  5 10 23:51 ..
-rw-r--r--    1 user  staff     251  5 11 00:24 gulpfile.js
drwxr-xr-x  334 user  staff   10688  5 11 00:10 node_modules
-rw-r--r--    1 user  staff  175378  5 11 00:10 package-lock.json
-rw-r--r--    1 user  staff     316  5 11 00:10 package.json
-rw-r--r--    1 user  staff      75  5 11 00:19 style.css
-rw-r--r--    1 user  staff      50  5 11 00:19 style.min.css
% cat style.min.css
.content{width:100%;height:200px;padding:5px 10px}%

gulp.task('watch', function() {
    gulp.watch('style.css', gulp.series('cssminify'));
});

gulp watch

 % gulp watch
[00:35:00] Using gulpfile ~/develop/..생략../gulp-tutorial/gulpfile.js
[00:35:00] Starting 'watch'...
[00:35:59] Starting 'cssminify'...
[00:35:59] Finished 'cssminify' after 18 ms
[00:36:06] Starting 'cssminify'...
[00:36:06] Finished 'cssminify' after 9.28 ms