Gulp-optimizing-css-javascript-files

Gulp-CSSとJavaScriptの最適化

この章では、CSSとJavaScriptを最適化する方法を学びます。 不要なデータを削除するには最適化が必要です（例： ソースファイルからのスペースと未使用文字）。 ファイルのサイズを縮小し、ファイルをより速くロードできるようにします

プラグインをインストールしてCSSとJavaScriptを最適化する

コマンドラインから「work」ディレクトリに移動し、次のコマンドを使用して「gulp-uglify」、「gulp-minify-css」、「gulp-concat」プラグインをインストールします-

npm install gulp-uglify gulp-minify-css gulp-concat

Copy

依存関係の宣言とタスクの作成

設定ファイル gulpfile.js で、次のコードに示すように、最初に依存関係を宣言します。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Copy

次に、次のコードに示すように、CSSとJavaScriptを最適化するタスクを作成する必要があります。

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

Copy

*js* タスクは、 *src/scripts/* フォルダーから *.js* ファイルを受け入れます。 *js* ファイルを連結およびu化してから、 *build/scripts/script.js* ファイルを生成します。

Copy

*CSS* タスクは、 *src/styles/* フォルダーから *.css* ファイルを受け入れます。 *CSS* ファイルを連結および縮小し、 *build/styles/styles.css* ファイルを生成します。

Copy

タスクを実行する

構成ファイルがセットアップされ、実行する準備ができました。 次のコマンドを使用して、タスクを実行します。

gulp

Copy

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Copy