[翻訳] Gulp.js_html/css_WEB-ITnose の紹介

私たちはページサイズを削減し、重いウェブサイトのパフォーマンスを向上させる方法についてたくさん話し合いました。サーバーの gzip 圧縮を有効にする、適切な画像形式を使用する、不要な文字を削除するなど、一部の操作は一度限りです。ただし、作業のたびに繰り返し実行する必要があるタスクがいくつかあります。

新規または変更された画像の圧縮

コンソール、デバッガーなどのデバッグステートメントの削除

CSSとJSをマージして圧縮

更新されたファイルをサーバーにデプロイ

これらの操作はすべて誰もが覚えていると想像するかもしれませんが、しかし、必ず 1 つや 2 つ忘れてしまう人がいます。プロジェクトが大きくなるにつれて、上記の作業はますます時間がかかります。これらの退屈な作業を完了するには、専任の担当者を割り当てる必要がありました。

これらの作業に人員を費やすことはできないでしょうか?

自動化されたランナーまたはビルド プロセスが必要ですが、複雑に思えます

このビルド プロセスの設定は、小さなタスクを個別に実行するよりも複雑ですが、アプリケーションの実行にかかる時間と人員、エラーが増えるため、時間を大幅に節約できますも回避できます。

実用的なソリューションを採用します:

最も時間のかかるタスクを自動化します

過剰なエンジニアリングを行わず、初期設定をできるだけ短くシンプルにしてください

しばらくは 1 つのタスク管理ツールを使用し、使用しないでください気まぐれに別のツールに切り替える A

いくつかの新しいツールと概念について説明します。

Node.js - Node.js を使用しますが、それについて詳しく知る必要はありません。JavaScript の知識があり、検索エンジンを使用できるようになっていれば十分です。
コマンド ライン - コマンドを入力できる必要がありますが、グラフィカル インターフェイスはありませんが、いくつかのコマンドは非常に簡単です。

grunt vs gulp

grunt について聞いたことがあるかもしれませんが、grunt は、node.js に基づくビルド ツールです

gulp は、node.js に基づく新しいビルド ツールです

grunt と gulp は同じことを行います。 Grunt は以前に登場し、順調に開発されており、多くのプラグインやリソース、チュートリアルが見つかります。これは素晴らしいツールです。すでにこのツールに慣れている場合、どのような問題があればそれを置き換える必要がありますか?

完璧なツールはありません。gulp.js は、grunt では解決できないいくつかの問題を解決するために開発されました。

grunt プラグ-in は複数のタスクを実行することがよくありますが、gulp プラグインは 1 つのことだけを実行します

grunt はファイル監視などのいくつかの基本機能を完了するためにプラグインを必要とし、gulp には基本機能が組み込まれています

grunt は JSON 形式を使用しますgulp は構成ファイルを使用しますが、gulp はより合理化されたシンプルな js コードを使用して構成します

最後の点である gulp が grunt よりも優れているとは誰もが考えているわけではありませんが、gulp のプレゼンテーション スライドを見て自分で判断することをお勧めします。

最も重要なことは、gulp はストリームの概念に基づいているということです。考えてみてください。ファイルはパイプラインを通過し、パイプライン上の 1 つ以上のポイントでいくつかの操作が実行されます。 (組み立てラインによく似ています)

たとえば、すべての js ファイルをスクリプト パイプラインに入れることができます。そこで

1 つのファイルにマージ
デバッグ コードを削除
コードを圧縮
生成されたファイルを指定されたファイルに配置ディレクトリ

メソッドへのデータ入力。このメソッドで出力された新しいデータは、次のメソッドで使用されます。これは、

$("#element").text("hello world!").addClass("myclass").fadeIn();

などの jQuery のチェーン呼び出しによく似ています。理論は終わったので、gulp を使用してみましょう。

ステップ 1: Node.js をインストールします

公式 Web サイトにアクセスして、コンピューター システムに対応するバージョンをダウンロードできます。Baidu を自分でインストールするにはどうすればよいですか?

インストールが完了したら、コマンドラインを開いて

node -v

と入力します

現在インストールされているノードのバージョンが表示されます。以下に

npm -v

と入力して、node.js パッケージ マネージャーのバージョン情報を表示することもできます。

コマンドが失敗した場合は、コマンドの入力が間違っていないか確認してください。それが正しければ、それは良いことであり、ノードのインストールが成功したことを意味します。

ステップ 2: gulp をインストールする

gulp をインストールするには、npm を使用します。gulp をどのプロジェクトでも使用できるように、グローバル環境にインストールするには -g フラグを追加する必要があります。

npm install gulp -g

Mac または Linux を使用している場合は、管理者権限に切り替えるには、コマンドの前に sudo を追加する必要があります。

sudo npm install gulp -g

次のコマンドを入力して、gulp が正常にインストールされているかどうかを確認します

gulp -v

ステップ 3: プロジェクトを構成します

たとえば、プロジェクト フォルダーが test の場合、最初にプロジェクト フォルダーに切り替えます

cd test

さまざまなシステムに従って、ファイルディレクトリを表示するには、Windows の場合は dir、Mac/linus の場合は ls を使用できます

テストフォルダーには次のサブフォルダーが含まれています

src — the location of pre-processed HTML source files and folders:

images — uncompressed images

scripts — multiple pre-processed script files

styles — multiple pre-processed CSS files

build — the location of production files for upload including:

images — compressed images

scripts — a single minified script file

styles — a single minified CSS file

（build文件夹是我们的生成目录，是通过自动化任务生成的）

首先，在项目里安装gulp

npm install gulp --save-dev

这个命令会在test里创建用于存放gulp和它插件的node_modules文件夹

最后，在test文件夹里创建一个空的gulpfile.js配置文件。这里放我们要声明的任务。

第4步：安装第1个gulp插件

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'));});

上面代码的意思是。

1. 引用gulp
2. 把gulp-jshint插件对象放到jshint变量中
3. 声明一个新的gulp任务jshint。这个把所有在src/scripts内的js文件输入到jshint对象中，并把发现的错误输出到控制台。

保存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

第5步：添加其它任务

让我们多尝试一些插件。我们将查找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-sass  一个node版本的css预处理器

gulp-clean 可以用来移除没用的文件或文件夹

gulp-file-include  用对应的文件替换对应的@@inclue('filename')

gulp-size   日志文件和项目文件的大小

第6步：自动化任务

到现在为止，我们都是一次运行一个任务，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

程序会一直保持激活状态并在你改变文件时运行。你不再需要每次都运行任务了。

ステップ 7: 効果

上記の方法を使用してプロジェクトを処理すると、ページ サイズを 50% 削減できます。数時間かけて gulp を学習すると、grunt よりも簡単に習得できます。このチュートリアルが役に立ち、独自の gulp ビルド ツールを構築できるようになることを願っています。

関連リンク:

Gulp ホームページ

Gulp プラグイン

Node.js ホームページ