Javascript と CSS 圧縮および merge_html/css_WEB-ITnose に Gulp を使用する

1. gulp をインストールします

gulp は、Node.js に基づいたフロントエンド構築ツールです。したがって、最初にnodejsをインストールし、nodejsをインストールする必要があります。

nodejs のインストールが完了したら、npm を使用して gulp をインストールする必要があります。

最初にグローバル gulp をインストールします

npm install -g gulp を実行してから、ローカル gulp をプロジェクトのルート ディレクトリにインストールします。

この時点で、プロジェクトのルートディレクトリに次のフォルダnode_modulesが作成されます

これでgulpのインストールは完了しましたが、gulp自体にはjsの圧縮やマージなどの機能はありませんので、 gulp 関連のプラグインを使用する必要があります。現時点では、js の圧縮とマージ、および css ファイルの圧縮の機能を完了する必要があるだけです。まず、対応するプラグインをインストールします:

1.css 圧縮 gulp-minify-css

2 .js 圧縮 gulp-uglify

3.js は gulp-concat

とマージされました。js コードは圧縮前にコード チェックされる必要があり、圧縮後に min サフィックスを追加する必要があるためです。完了したら、他の 2 つのプラグインもインストールする必要があります:

4. gulp-rename の名前を変更します

5.js コード検出 gulp-jshint (または gulp-jslint)

(その他のプラグインについては、http://gulpjs.com/plugins/ を参照してください)

プロジェクトのルート ディレクトリで次のコマンドを実行します:

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint –save-dev インストール済み プラグインは上記のnode_modulesフォルダーに表示されます。

2. gulp を使用します

ok、これで gulp を使用して、プロジェクトのルート ディレクトリに gulpfile.js ファイルを作成できます。

gulpfile.js に次のコードを追加します。

var gulp = require('gulp')，    minifycss = require('gulp-minify-css')，    concat = require('gulp-concat')，    uglify = require('gulp-uglify')，    rename = require('gulp-rename')，    jshint=require('gulp-jshint');    //语法检查    gulp.task('jshint'， function () {        return gulp.src('js/*.js')            .pipe(jshint())            .pipe(jshint.reporter('default'));    });    //压缩css    gulp.task('minifycss'， function() {        return gulp.src('css/*.css')    //需要操作的文件            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名            .pipe(minifycss())   //执行压缩            .pipe(gulp.dest('Css'));   //输出文件夹    });    //压缩，合并 js    gulp.task('minifyjs'， function() {        return gulp.src('js/*.js')      //需要操作的文件            .pipe(concat('main.js'))    //合并所有js到main.js            .pipe(gulp.dest('js'))       //输出到文件夹            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名            .pipe(uglify())    //压缩            .pipe(gulp.dest('Js'));  //输出    });　　//默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)    gulp.task('default'，['jshint']，function() {        gulp.start('minifycss'，'minifyjs'); 　　});

上記のコードの関連メソッドは、gulp API ドキュメントで参照できます。

ファイル内の gulp コマンドを実行します。ルート ディレクトリ:

(Js ファイルに問題がある場合は、対応するエラー プロンプトが表示されます。プロンプトされたエラー メッセージに従って変更するだけです)

ビンゴ、これで、 css フォルダー ファイル内の圧縮 css を開くと、js 内にマージされ圧縮された main.min.js が表示されます。タスクは完了です。html 内の css および js によって参照されるパスを新しいパスに変更するだけです。