gulp実践構成の導入と使い方

はじめに:

gulp は、フロントエンド開発プロセスでコードを構築するためのツールです。これは、Web サイトのリソースを最適化するだけでなく、開発中の多くの反復的なタスクに適切なツールを使用することもできます。彼女を使用すると、開発プロセスが自動的に完了するため、コードを楽しく書くことができるだけでなく、作業効率も大幅に向上します。

gulp は、Nodejs に基づいた自動タスク ランナーで、javascript/coffee/sass/less/html/image/css ファイルのテスト、検査、マージ、圧縮、フォーマット、ブラウザの自動更新などを自動的に実行できます。展開ファイルが生成され、ファイルが変更された後、指定された手順が繰り返されます。実装に関しては、Unix オペレーティング システムのパイプのアイデアを利用しており、前のレベルの出力が次のレベルの入力になるため、操作が非常に簡単になります。この記事では、Gulp を使用して開発プロセスを変更し、開発をより迅速かつ効率的に行う方法を学びます。

gulp は grunt に非常に似ていますが、grunt の頻繁な IO 操作と比較して、gulp のストリーム操作はビルド作業をより速く、より便利に完了できます。

私はこの構成をデモ テスト構成と呼んでいます。仕事をするときに、エフェクトをすばやく作成したり、特定の機能を実装したりする必要があることがよくあるためです。自分で実装する時間がない場合は、既存のサンプルやプラグインをいくつか見つける必要があります。 -イン。

ただし、これらのデモやプラグインは、多くの場合、モバイル端末で表示するか、サーバーを起動する必要があるため、この構成の主なタスクは、モバイル端末と PC の両方で表示できるローカル サーバーを起動することです。さらに、コードを変更するときに、自動的に更新されるため、特にモバイル デバイスでは、毎回更新するためにアプリケーションを切り替える必要がなく、多くの手間を省くことができます。

詳細なコードは以下の通りです:

gulpfile.js:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();// 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'},
    files: './demo/**/*',
    browser: ["chrome"]
  })
})// 默认任务，在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))

package.json:

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
  }
}

フォルダー構造:

XX—

|— デモ

|—ファイル.js

| — package.json

この構成では、1 つのプラグインbrowserSync のみを使用します。このプラグインは、モバイル端末と PC 端末を自動的に更新して同期することができます。

browserSync は非常に強力なプラグインです。これについては、シンプルでわかりやすい中国語のドキュメントがあります。必要に応じて確認してください。さらに、ここでのちょっとしたトリックは、より簡単な gulp の watch 関数を使用せずに、プラグインの設定オプションを通じてファイルの変更を直接監視できることです。

以上がgulp実践構成の導入と使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。