gulp のインストール + パッケージ化 + マージの最も詳細な説明

今回は gulp のインストール + パッケージ化 + マージについて最も詳しく説明します。gulp のインストール + パッケージ化 + マージを使用する際の の注意事項について説明します。実際のケースを見てみましょう。

はじめに Gulp は、フロントエンド開発プロセスでコードを構築するためのツールであり、Web サイトのリソースを最適化できるだけでなく、適切なツールを使用して開発プロセス中の多くの繰り返しタスクを自動的に完了できます。

; 彼女を使用すると、楽しくコードを書くことができるだけでなく、作業効率も大幅に向上します。

インストール、パッケージ化、結合

1.

node.jsをインストールします

ダウンロードアドレス: http://nodejs.cn/ node.js コマンドラインを開き、「」と入力します。バージョン番号がある場合は、正しくインストールされています。

node  -v 2. 淘宝網イメージをインストールします: コマンドライン入力:

npm install -g cnpm --registry=http://registry.npm.taobao.org

目的: 次のステップを迅速化するため。

3. gulp をグローバルにインストールする

cnpm install --global gulp

4. ディレクトリを作成し、ドライブ F を開き、gulp フォルダーを作成します。

コマンドライン入力:

f:
cd gulp

5. ローカル gulp をインストールします

cnpm install --save-dev gulp

6. package.json ファイルを作成します

cnpm init

最後まで入力して確認してください

7.web

Editor

この gulp ディレクトリ (hbuilder、webstorm など) を開きます。 gulpディレクトリにgulpfile.jsファイルを作成します

8. パッケージ化と圧縮の種類、html、js、css、img を決定します

9.js パッケージング

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});

10.node.jsの入力

ゴクゴク

gulp-concat コンポーネントがインストールされていないことを示すエラー メッセージが表示されます。インストールを開始します:

もう一度実行します: ゴクゴクcnpm install gulp-concat --save-dev

gulp-uglify コンポーネントがインストールされていないことを示すエラーが再度報告されます。インストールを開始します:

もう一度実行します: ゴクゴクcnpm install gulp-uglify --save-dev

ここで、完成した「default」が表示されます。「default」は、gulp.task タスクを開始するためのデフォルトのエントリです。複数のタスクを作成し、タスク名を次のように変更する場合:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
  gulp.task('style', function() { //task 任务名称为style
  gulp.src('.css/*.css')
  .pipe(concat('styles.css'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });

再放送: ゴクゴク

結果:

デフォルトのタスクタスクのみが実行されていることがわかります。これはデフォルトの gulp 実行エントリだけであるためです。

次のように変更されました

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
  gulp.task('style', function() { //task 任务名称为style
  gulp.src('.css/*.css')
  .pipe(concat('styles.css'))
  .pipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'));
  });
<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});

インストールされていないコンポーネントが見つかった場合は、その操作方法を知っておく必要があると思います。

11. 画像圧縮

えー 12.html 圧縮

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});

13. パスの問題を自分で変更する

gulpがjs/cssをパッケージ化して1つのファイルにマージするときの順序の解決策

1. gulp-order を使用して挿入できます。

2. 次のように書くことができます:

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js と jquery で画像の自動読み込みを実装する方法 (コード付き)

Vue2.0 でユーザー権限を操作する方法

以上がgulp のインストール + パッケージ化 + マージの最も詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。