ホームページ > 記事 > ウェブフロントエンド > gulp のインストールとパッケージ化、マージの詳細な説明

gulp のインストールとパッケージ化、マージの詳細な説明

小云云オリジナル: 2018-01-18 10:48:352813ブラウズ

この記事では、gulpでのパッケージ化とマージ方法の実装方法のチュートリアルを中心に、gulpがjs/cssをパッケージ化して1つのファイルにマージする際の解決方法をサンプルコードを通して詳しく紹介しています。必要な友達参考にしたり、編集者をフォローして一緒に学んだりできます。皆さんのお役に立てれば幸いです。

前書き

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

確認のためにすべてを入力します

7. hbuilder などの Web エディターでこの gulp ディレクトリを開きます。、ウェブストーム。

gulp 実行のエントリポイントである gulpfile.js ファイルを gulp ディレクトリに作成します

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

9.js パッケージ化

cnpm init

10. 実行します。Node.js 入力

gulp

は、gulp-concat コンポーネントがインストールされていないことを示すエラーを報告します。インストールを開始します: cnpm install gulp-concat --save-dev

再度実行します: gulp

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

もう一度実行します: gulp

。。。。。。。。。。。。。。。

成功すると、

completed ‘default’ が表示されます。‘default’ は、gulp.task タスクを開始するためのデフォルトのエントリです。複数のタスク 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目录下。
});

Rerun: gulp

Result:

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

変更内容は以下の通りです

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'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

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

11. 画像圧縮

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任务
});

12. HTML圧縮

1. gulpがjs/cssを1つのファイルにパッケージ化する際の順序を解決する

2. 次のように記述できます:

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

gulp のインストールとパッケージ化、マージの詳細な説明

関連記事