gulpのインストールと使用

3944 ワード

gulp紹介
gulpは自動化ツールで、フロントエンド開発者はそれを使用して一般的なタスクを処理することができます:webサーバファイルの保存を構築する時に自動的にブラウザをリロードしてSass、LESSなどのプリプロセッサを使用して資源を最適化して、例えばCSSを圧縮して、JavaScript、画像を圧縮してGulpのようなツールを圧縮して、私達は通常構築ツールあるいは自動化構築ツールと言います.
npm共通コマンド
npm -v:  npm     。
npm init:        package.json  ,    、  、     。
npm list:           node 。
npm ls:           node 。
npm install moduleNames:  Node       node_modules 。
npm install <name> -g:          。
npm install <name> --save:     ,     package.json 
        package.json   ,    npm install       dependencies          ,       git ,     node_modules      。
npm install <name> --save-dev:     ,     package.json         package.json   ,    npm install       devDependencies          ,       git ,     node_modules      。
npm uninstall moudleName:  node  。
gulpインストール
プロジェクトでgulpを使用してフォルダgulptestを作成し、プロジェクトのディレクトリとしてルートディレクトリの下でnpm initコマンドを実行します.npm initコマンドはpackage.jsonファイルを作成します.このファイルにはプロジェクト関連情報が保存されています.例えば、あなたが使っている様々な依存(ここでは主にプラグイン)
インストールgulp
npm install gulp -g            (            gulp  )。  (npm i gulp -g)(    )
npm install gulp --save-dev         ,         package.json ,  (npm i gulp -D)(    )
node、npm、npxが正しくインストールされているかどうかを確認します.
node --version
npm --version
npx --version
プロジェクトディレクトリを作成して
npx mkdirp my-project
cd my-project
プロジェクトディレクトリの下にpackage.jsonファイルを作成する
npm init
上記のコマンドでは、プロジェクト名、バージョン、説明情報などの設定を指示します.
開発時の依存項目としてgulpをインストール
npm install --save-dev gulp
gulpバージョンの確認
gulp --version
gulpfileファイルを作成するには、任意のテキストエディタを使用して、プロジェクトの大きなルートディレクトリの下にgulpfile.jsというファイルを作成し、ファイルに次の内容を入力します.
function defaultTask(cb) {
  // place code for your default task here
  cb();
}
exports.default = defaultTask
プロジェクトルートディレクトリでgulpコマンドを実行するテスト:
gulp
複数のタスク(task)を実行する必要がある場合はgulpを実行できます.