私たちはページサイズを削減し、重いウェブサイトのパフォーマンスを向上させる方法についてたくさん話し合いました。サーバーの gzip 圧縮を有効にする、適切な画像形式を使用する、不要な文字を削除するなど、一部の操作は一度限りです。ただし、作業のたびに繰り返し実行する必要があるタスクがいくつかあります。
これらの操作はすべて誰もが覚えていると想像するかもしれませんが、しかし、必ず 1 つや 2 つ忘れてしまう人がいます。プロジェクトが大きくなるにつれて、上記の作業はますます時間がかかります。これらの退屈な作業を完了するには、専任の担当者を割り当てる必要がありました。
これらの作業に人員を費やすことはできないでしょうか?
自動化されたランナーまたはビルド プロセスが必要ですが、複雑に思えます
このビルド プロセスの設定は、小さなタスクを個別に実行するよりも複雑ですが、アプリケーションの実行にかかる時間と人員、エラーが増えるため、時間を大幅に節約できますも回避できます。
実用的なソリューションを採用します:
最も時間のかかるタスクを自動化します
gulp は、node.js に基づく新しいビルド ツールです
grunt と gulp は同じことを行います。 Grunt は以前に登場し、順調に開発されており、多くのプラグインやリソース、チュートリアルが見つかります。これは素晴らしいツールです。すでにこのツールに慣れている場合、どのような問題があればそれを置き換える必要がありますか?
完璧なツールはありません。gulp.js は、grunt では解決できないいくつかの問題を解決するために開発されました。
grunt プラグ-in は複数のタスクを実行することがよくありますが、gulp プラグインは 1 つのことだけを実行します
最も重要なことは、gulp はストリームの概念に基づいているということです。考えてみてください。ファイルはパイプラインを通過し、パイプライン上の 1 つ以上のポイントでいくつかの操作が実行されます。 (組み立てラインによく似ています)
たとえば、すべての js ファイルをスクリプト パイプラインに入れることができます。そこで
$("#element").text("hello world!").addClass("myclass").fadeIn();ステップ 1: Node.js をインストールします
公式 Web サイトにアクセスして、コンピューター システムに対応するバージョンをダウンロードできます。Baidu を自分でインストールするにはどうすればよいですか?
node -v
npm -v
コマンドが失敗した場合は、コマンドの入力が間違っていないか確認してください。それが正しければ、それは良いことであり、ノードのインストールが成功したことを意味します。
ステップ 2: gulp をインストールする
gulp をインストールするには、npm を使用します。gulp をどのプロジェクトでも使用できるように、グローバル環境にインストールするには -g フラグを追加する必要があります。
npm install gulp -g
sudo npm install gulp -g
次のコマンドを入力して、gulp が正常にインストールされているかどうかを確認します
gulp -v
ステップ 3: プロジェクトを構成します
たとえば、プロジェクト フォルダーが test の場合、最初にプロジェクト フォルダーに切り替えます
cd test
テストフォルダーには次のサブフォルダーが含まれています
（build文件夹是我们的生成目录，是通过自动化任务生成的）
首先，在项目里安装gulp
npm install gulp --save-dev
这个命令会在test里创建用于存放gulp和它插件的node_modules文件夹
最后，在test文件夹里创建一个空的gulpfile.js配置文件。这里放我们要声明的任务。
gulp不能自己就工作，你必须安装和配置插件来执行特定任务。首先安装jshint,用于检测我们的js源文件的质量。安装命令如下
npm install gulp-jshint --save-dev
打开gulpfile.js文件，添加以下代码
// include gulpvar gulp = require('gulp'); // include plug-insvar jshint = require('gulp-jshint');// JS hint taskgulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});上面代码的意思是。
保存gulpfile.js文件，并且在命令行运行任务，如下
gulp jshint
你会在控制台得到以下信息：
[gulp] Using file D:\test\gulpfile.js[gulp] Working directory changed to D:\test[gulp] Running 'jshint'...[gulp] Finished 'jshint' in 8.24 msD:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.1 error
让我们多尝试一些插件。我们将查找src/images文件夹下，新图片或修改图片，把它们压缩并输出到build/images文件夹里。要做到这些，我们需要安装gulp-changed和gulp-imagemin两个插件。
npm install gulp-changed --save-devnpm install gulp-imagemin --save-dev
接下来在gulpfile.js文件中引用它们。
var changed = require('gulp-changed');var imagemin = require('gulp-imagemin');并且添加一个新gulp任务，用于执行插件
// minify new imagesgulp.task('imagemin', function() { var imgSrc = './src/images/**/*', imgDst = './build/images'; gulp.src(imgSrc) .pipe(changed(imgDst)) .pipe(imagemin()) .pipe(gulp.dest(imgDst));});保存gulpfile.js，然后在命令行运行下面的命令
gulp imagemin
图片会被压缩并保存到生成目录对应的文件夹中，并且在控制台会得到下面的信息
[gulp] Using file D:\test\gulpfile.js[gulp] Working directory changed to D:\test[gulp] Running 'imagemin'...[gulp] Finished 'imagemin' in 5.71 ms[gulp] gulp-imagemin: ? battery.png (saved 2.7 kB)[gulp] gulp-imagemin: ? app.png (saved 3.2 kB)[gulp] gulp-imagemin: ? tick.png (saved 2.8 kB)
相同的方法，我们可以添加gulp-minify-html插件，用于压缩所有src下的html文件
npm install gulp-minify-html --save-dev
修改gulpfile.js文件，添加新任务htmlpage
// include plug-insvar minifyHTML = require('gulp-minify-html');// minify new or changed HTML pagesgulp.task('htmlpage', function() { var htmlSrc = './src/*.html', htmlDst = './build'; gulp.src(htmlSrc) .pipe(changed(htmlDst)) .pipe(minifyHTML()) .pipe(gulp.dest(htmlDst));});保存gulpfile.js，然后测试一下html的压缩
gulp htmlpage
很简单吧？下面来使用一下js相关的插件，对源文件进行合并，压缩，去除调试代码的插件。
还是先安装
npm install gulp-concat --save-dev npm install gulp-strip-debug --save-dev npm install gulp-uglify --save-dev
在gulpfile.js添加一个新任务scripts
// include plug-insvar concat = require('gulp-concat');var stripDebug = require('gulp-strip-debug');var uglify = require('gulp-uglify');// JS concat, strip debugging and minifygulp.task('scripts', function() { gulp.src(['./src/scripts/lib.js','./src/scripts/*.js']) .pipe(concat('script.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/'));});这个例字中，我们使用一个数组给gulp.src方法传值。这样可以让js按照给定的顺序进行合并和压缩，可以解决一些依赖的问题。和上面一样，保存，然后运行任务
gulp scripts
最后让我们来处理一下css文件，使用添加浏览器前缀插件，压缩插件。
安装
npm install gulp-autoprefixer --save-dev npm install gulp-minify-css --save-dev
更新gulpfile.js文件
// include plug-insvar autoprefix = require('gulp-autoprefixer');var minifyCSS = require('gulp-minify-css');// CSS concat, auto-prefix and minifygulp.task('styles', function() { gulp.src(['./src/styles/*.css']) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('./build/styles/'));});最后运行
gulp styles
给autoprefixer插件，传入以字符串或数组形式的浏览器支持配置，这里我们希望支持所有最新两个版本的浏览器。它会把每个属性按照caniuse.com里的数据进行对照，需要添加前缀则添加。可以避免每次去手工查询并添加对应前缀。
在这些例子中我们只是演示了几个有用的插件，你也可以自己到npmjs.org里去查找你需要的。其它一些有用的插件有：
到现在为止，我们都是一次运行一个任务，gulp允许我们在一个任务中执行所有它依赖的子任务。下面在gulpfile.js中创建一个default任务
// default gulp taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});然后在命令行运行下面命令
gulp
所有任务都是按照顺序执行。
但这样还是太麻烦了，每次都要执行。gulp可以使用watch方法来监听你的文件夹，如果有变化，会执行一个任务来完成。下面我们修改一下default任务，使其可以监听html,css,js,image文件的变化。
// default gulp taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() { // watch for HTML changes gulp.watch('./src/*.html', function() { gulp.run('htmlpage'); }); // watch for JS changes gulp.watch('./src/scripts/*.js', function() { gulp.run('jshint', 'scripts'); }); // watch for CSS changes gulp.watch('./src/styles/*.css', function() { gulp.run('styles'); });});现在我们再运行
gulp
程序会一直保持激活状态并在你改变文件时运行。你不再需要每次都运行任务了。
上記の方法を使用してプロジェクトを処理すると、ページ サイズを 50% 削減できます。数時間かけて gulp を学習すると、grunt よりも簡単に習得できます。このチュートリアルが役に立ち、独自の gulp ビルド ツールを構築できるようになることを願っています。
関連リンク:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
