Ubuntu20.04にGulpJSをインストールする方法

このチュートリアルでは、Ubuntu20.04にGulpJSをインストールする方法を紹介します。UbuntuでJavascriptファイルを縮小するためにGulpJSをセットアップする方法を学びます。

GulpJSは、開発ワークフローで面倒なタスクや時間のかかるタスクを自動化するのに役立つツールキットです。統合はすべての主要なIDEに組み込まれており、人々はPHP、.NET、Node.js、Java、およびその他のプラットフォームでgulpを使用しています。

npmモジュールを使用して、ファイル変換をストリーミングするための3000を超える厳選されたプラグインを使用して必要な処理を実行します。最小限のAPIサーフェスのみを提供することで、gulpは習得が容易で使いやすいです。

前提条件

• Ubuntu20.04専用サーバー
• rootユーザーまたはsudo管理者権限を持つ通常のユーザー。

ステップ1-サーバーを最新の状態に保つ

# apt update -y

# apt upgrade -y

ステップ2-ビルドエッセンシャルをインストールする

# apt-get install build-essential -y

ステップ3-NodeJSとNPMをインストールする

NodeJSの最新の安定したリリースをインストールします。

# curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

# apt-get install -y nodejs

インストールが成功したことを確認します。

# node -v && npm -v

出力：

v14.14.0
6.14.8

ステップ4-GulpJSCLIをインストールする

次のコマンドを使用してGulpJSCLIをインストールします。

# npm install -g gulp-cli

インストールが成功したことを確認します。

# gulp -v

設定

プラグインでGulpJSを使用するには、gulpfile.js ファイルと package.json ファイルが必要 です。

• gulpfile.js：プラグイン管理とともにタスクを構成、パイプ、実行します。
• package.json：依存関係とそのバージョンを追跡します。

プロジェクトディレクトリに移動します。

# cd /path/to/project/

NPM環境を初期化してpackage.jsonを作成します 。

パッケージ名の入力を求められたら、gulpjsを使用し ます。ENTER を押し て、他のすべての質問に対するデフォルトの応答を受け入れます。その後、この要約が表示されます。

About to write to /root/package.json:

{
"name': "gulpjs',
"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 と入力し 、Enterキーを押し ます。

ローカルインストール 一気 パッケージと 一口-uglify プラグインを。

# npm install --save-dev gulp gulp-uglify

gulpタスクの作成

 プロジェクトのルートにgulpfile.jsを作成します 。

# vi gulpfile.js

ライブラリをインポートしてから、タスクを定義します。サンプルタスクの名前は exampleTaskです。

const gulp = require('gulp'); // Import Gulp
const uglify = require('gulp-uglify'); // Import Gulp Uglify (Javascript minify)

gulp.task('exampleTask', ()=>{ // define a task
return gulp.src('/path/to/javascript/files/*.js') // source a directory full of anything ending with .js
.pipe(uglify()) // minify the stream
.pipe(gulp.dest('/path/to/destination/')); // send files to a destination
});

/ path / to / javascript / files /に少なくとも1つのjavascriptファイルがあることを確認してください 。

# ls /path/to/javascript/files/

出力：

file.js

タスクを実行します。

# gulp exampleTask

出力：

Working directory changed to ~
Using gulpfile ~/gulpfile.js
Starting 'exampleTask’…
Finished 'exampleTask' after 59 ms

/ path / to / destination /に は、縮小されたファイルが含まれています。

# ls /path/to/destination/

出力：

file.js

GulpJSが正常にインストールされました。

このチュートリアルでは、Ubuntu20.04にGulpJSをインストールする方法を示しました。