gulpのインストールと使用
3944 ワード
gulp紹介
gulpは自動化ツールで、フロントエンド開発者はそれを使用して一般的なタスクを処理することができます:webサーバファイルの保存を構築する時に自動的にブラウザをリロードしてSass、LESSなどのプリプロセッサを使用して資源を最適化して、例えばCSSを圧縮して、JavaScript、画像を圧縮してGulpのようなツールを圧縮して、私達は通常構築ツールあるいは自動化構築ツールと言います.
npm共通コマンド
プロジェクトでgulpを使用してフォルダgulptestを作成し、プロジェクトのディレクトリとしてルートディレクトリの下でnpm initコマンドを実行します.npm initコマンドはpackage.jsonファイルを作成します.このファイルにはプロジェクト関連情報が保存されています.例えば、あなたが使っている様々な依存(ここでは主にプラグイン)
インストールgulp
開発時の依存項目として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を実行できます.