「gulp」＋「LibSass」（その３−１）：PJ実行編１（１ファイルで複数タスクを実行）

未分類 

現在、

    コマンド

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 gulpｎ 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




[１つのタスクファイルの２つのタスクを設定し作成とタスクの実行]

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：（その３から引き続き）

・絶対つまずかないGulp入門(2018年版)：
　（https://ics.media/entry/3290/3）
　↑途中動画が混じっていて少し見づらい

・brushClover：Gulpで行うSassのコンパイル
（http://brush-clover.com/web/gulp-sass-compass-env/）

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

myinfotetest

スポンサーリンク