現在、
コマンド gulp tasName は command not foundで実行できない(とりあえずこのまま放置しておく) コマンド npx gulp は実行できる タスクファイルのタスク名をdefaultの状態で実行 それ以外の名前をつけた場合は、npx gulp (タスク名)で実行できることがわかった段階
[base_dir] = /Users/xxx ←例)
[base_dir]/dev_area/gulp_libSass_samples/test2
に新しいPJを作成してタスク名をつけて実行してみる
mkdir [base_dir]/dev_area/gulp_libSass_samples/test2
cd [base_dir]/dev_area/gulp_libSass_samples/test2
npm init -y
[result]+[comfirm]
[base_dir]/dev_area/gulp_libSass_samples/test2
にpackage.jsonファイルが作成されていればOK
※この時点で、package.json -> package.json.v1 とBackup(v1)をとっておく
[gulpインストール実行]
cd [base_dir]/dev_area/gulp_libSass_samples/test2
npm install -D gulp
[result]エラー
[エラー詳細] npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 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 test2@1.0.0 No description npm WARN test2@1.0.0 No repository field. + gulp@3.9.1 added 253 packages from 162 contributors and audited 1112 packages in 22.101s found 5 vulnerabilities (1 low, 4 high) run `npm audit fix` to fix them, or `npm audit` for details
エラーの出力内容をもとに「npm audit fix」と実行
cd [base_dir]/dev_area/gulp_libSass_samples/test2
npm audit fix
[result]
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
up to date in 1.586s
fixed 0 of 5 vulnerabilities in 1112 scanned packages
1 package update for 5 vulns involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
エラーの出力内容をもとに「npm audit fix --force」と実行
cd [base_dir]/dev_area/gulp_libSass_samples/test2
npm audit fix –force
[result]
npm WARN using --force I sure hope you know what you are doing.
> fsevents@1.2.4 install /Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/fsevents
> node install
[fsevents] Success: "/Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ gulp@4.0.0
added 197 packages from 109 contributors, removed 64 packages and updated 23 packages in 17.116s
fixed 5 of 5 vulnerabilities in 1112 scanned packages
1 package update for 5 vulns involved breaking changes
(installed due to `--force` option)
[gulpインストール(再)]
cd [base_dir]/dev_area/gulp_libSass_samples/test2
npm install -D gulp
[result]
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
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 test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ gulp@3.9.1
added 253 packages from 162 contributors and audited 1112 packages in 22.101s
found 5 vulnerabilities (1 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details
xxx-no-MBP:test2 xxx$ npm audit fix
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
up to date in 1.586s
fixed 0 of 5 vulnerabilities in 1112 scanned packages
1 package update for 5 vulns involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
xxx-no-MBP:test2 xxx$
xxx-no-MBP:test2 xxx$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.
> fsevents@1.2.4 install /Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/fsevents
> node install
[fsevents] Success: "/Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ gulp@4.0.0
added 197 packages from 109 contributors, removed 64 packages and updated 23 packages in 17.116s
fixed 5 of 5 vulnerabilities in 1112 scanned packages
1 package update for 5 vulns involved breaking changes
(installed due to `--force` option)
xxx-no-MBP:test2 xxx$ npm install -D gulp
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ gulp@4.0.0
updated 1 package and audited 5472 packages in 8.406s
found 0 vulnerabilities
この時点でコマンド
gulp
は
[reuslt]
-bash: gulp: command not found
[gulp + gulp-sassインストール]
npm install -D gulp gulp-sass
↑このコマンドは、ローカルにインストールコマンド
なので、コマンド「 npm install -D gulpn gulp-sass 」により
ローカルに glup と gulp-sassが導入される
[reust(コマンドの実行結果)]
> node-sass@4.9.3 install /Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/node-sass
> node scripts/install.js
Cached binary found at /Users/xxx/.npm/node-sass/4.9.3/darwin-x64-59_binding.node
> node-sass@4.9.3 postinstall /Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ gulp@4.0.0
+ gulp-sass@4.0.1
added 118 packages from 113 contributors, updated 1 package and audited 6034 packages in 20.314s
found 0 vulnerabilities
※この時点で、package.json -> package.json.v2 とBackup(v2)をとっておく
package.json.v1とpackage.json.v2の差分は、
"devDependencies": { "gulp": "^4.0.0", "gulp-sass": "^4.0.1" }
となっていれば正常に環境は構築できている
[タスクファイルの作成とタスクの実行]
[タスクファイルの作成]
cd [base_dir]/dev_area/gulp_libSass_samples/test2
vi [base_dir]/dev_area/gulp_libSass_samples/test2/gulpfile.js
gulp.task('task1', (done) => { console.log('task1'); done(); // タスク内の処理が完了したタイミングでcallbackを呼ぶ });
[タスクの実行](task1を実行)
npx gulp task1
[result]
/Users/xxx/dev_area/gulp_libSass_samples/test2/gulpfile.js:1
(function (exports, require, module, __filename, __dirname) { gulp.task('task1', (done) => {
^
ReferenceError: gulp is not defined
at Object.<anonymous> (/Users/xxx/dev_area/gulp_libSass_samples/test2/gulpfile.js:1:63)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
at execute (/Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
at Liftoff.handleArguments (/Users/xxx/dev_area/gulp_libSass_samples/test2/node_modules/gulp/node_modules/gulp-cli/index.js:175:63)
xxx-no-MBP:test2 xxx$
[タスクの実行](task1を実行[再])
vi [base_dir]/dev_area/gulp_libSass_samples/test2/gulpfile.js
// gulpプラグインの読み込み const gulp = require('gulp'); // Sassをコンパイルするプラグインの読み込み const sass = require('gulp-sass'); gulp.task('task1', (done) => { console.log('task1'); done(); // タスク内の処理が完了したタイミングでcallbackを呼ぶ });
cd [base_dir]/dev_area/gulp_libSass_samples/test2/
npx gulp task1
[result]
[11:44:46] Using gulpfile ~/dev_area/gulp_libSass_samples/test2/gulpfile.js
[11:44:46] Starting ‘task1’…
task1
[11:44:46] Finished ‘task1’ after 2.66 ms
xxx-no-MBP:test2 xxx$
↑正常に実行OK
[1つのタスクファイルの2つのタスクを設定し作成とタスクの実行]
vi ~/dev_area/gulp_libSass_samples/test2/gulpfile.js
// gulpプラグインの読み込み const gulp = require('gulp'); // Sassをコンパイルするプラグインの読み込み const sass = require('gulp-sass'); gulp.task('task1', (done) => { console.log('task1'); done(); // タスク内の処理が完了したタイミングでcallbackを呼ぶ }); gulp.task('task2', (done) => { console.log('task2'); done(); // タスク内の処理が完了したタイミングでcallbackを呼ぶ });
xxx-no-MBP:test2 xxx$ npx gulp task1 <- 一回目の実行(task1)
[11:48:43] Using gulpfile ~/dev_area/gulp_libSass_samples/test2/gulpfile.js
[11:48:43] Starting ‘task1’…
task1
[11:48:43] Finished ‘task1’ after 2.53 ms
xxx-no-MBP:test2 xxx$ npx gulp task2 <- 二回目の実行(task2)
[11:48:46] Using gulpfile ~/dev_area/gulp_libSass_samples/test2/gulpfile.js
[11:48:46] Starting ‘task2’…
task2
[11:48:46] Finished ‘task2’ after 2.57 ms
xxx-no-MBP:test2 xxx$
参考URL:(その3から引き続き)
・絶対つまずかないGulp入門(2018年版):
(https://ics.media/entry/3290/3)
↑途中動画が混じっていて少し見づらい
・brushClover:Gulpで行うSassのコンパイル
(http://brush-clover.com/web/gulp-sass-compass-env/)