gulpとwebpackの違い
1981 ワード
gulp
webpack
同じ機能:
機能gulp webpack
gulp.task('sass',function(){ gulp.src(cssFiles) .pipe(sass().on('error',sass.logError)) .pipe(require('gulp-minify-css')()) .pipe(gulp.dest(distFolder)); }); スタイルマージにはextract-text-webpack-pluginプラグインが一般的に用いられ、圧縮にはwebpackが用いる.optimize.UglifyJsPlugin.
ファイルのマージと圧縮(js)gulp-uglifyとgulp-concatの2つのモジュールjsのマージはモジュール化の開始からすでに行われており、圧縮はwebpackを用いる.optimize.UglifyJsPlugin
sass/lessプリコンパイルgulp-sass/gulp-lessモジュールsass-loader/less-loaderを使用したプリプロセッシング起動server gulp-webserverモジュールを使用
var webserver =require('gulp-webserver'); gulp.task('webserver',function(){gulp.src('./').pipe(webserver({host:'localhost',port:8080,livereload:true,//directoryListing:{enable:true,path:'./'});});Webpack-dev-serverモジュールmoduleを使用します.exports={......devServer:{contentBase:[build/]、port:8080、inline:true//リアルタイムリフレッシュ}}バージョン管理gulp-revとgulp-rev-collectorの2つのモジュールを使用して生成ファイルにhash値moduleを追加します.exports = { ...... output: { ...... filename: "[name].[hash:8].js"}, plugins:[ ...... new ExtractTextPlugin(style.[hash].css") ] }
両者の違い:フロントエンド自動化構築ツールですが、彼らの位置づけを見ると対等ではないことがわかります.gulpは厳密に言えば、モジュール化は彼が強調したものではなく、先端開発プロセスを規範化することを目的としている.Webpackはモジュール化開発を明らかに強調しているが、ファイル圧縮合併、前処理などの機能は、彼が付属している機能にすぎない.
まとめ:gulpはgruntと比較すべきで、webpackはbrowserifyと比較すべきだ(ネット上では資料が多すぎてそう言うのは間違いないが、この一言だけでははっきりしない).gulpとwebpackが相補的なのか、交換可能なのかは、あなたのプロジェクトのニーズに依存します.vueまたはreactの単一ページアプリケーションであれば、webpackも十分です.Webpackのいくつかの機能が面倒でない場合(雪碧図はありません)、gulpと組み合わせて使用することができます.
gulp ， task， task （ 、 、 server、 ）， ， gulp task， 。
webpack
webpack ， ， （ 、js 、css ） ， loader（ ） plugins（ ） ， 。
同じ機能:
gulp webpack ， （ ）：
機能gulp webpack
（css） gulp-minify-css
gulp.task('sass',function(){ gulp.src(cssFiles) .pipe(sass().on('error',sass.logError)) .pipe(require('gulp-minify-css')()) .pipe(gulp.dest(distFolder)); }); スタイルマージにはextract-text-webpack-pluginプラグインが一般的に用いられ、圧縮にはwebpackが用いる.optimize.UglifyJsPlugin.
ファイルのマージと圧縮(js)gulp-uglifyとgulp-concatの2つのモジュールjsのマージはモジュール化の開始からすでに行われており、圧縮はwebpackを用いる.optimize.UglifyJsPlugin
sass/lessプリコンパイルgulp-sass/gulp-lessモジュールsass-loader/less-loaderを使用したプリプロセッシング起動server gulp-webserverモジュールを使用
var webserver =require('gulp-webserver'); gulp.task('webserver',function(){gulp.src('./').pipe(webserver({host:'localhost',port:8080,livereload:true,//directoryListing:{enable:true,path:'./'});});Webpack-dev-serverモジュールmoduleを使用します.exports={......devServer:{contentBase:[build/]、port:8080、inline:true//リアルタイムリフレッシュ}}バージョン管理gulp-revとgulp-rev-collectorの2つのモジュールを使用して生成ファイルにhash値moduleを追加します.exports = { ...... output: { ...... filename: "[name].[hash:8].js"}, plugins:[ ...... new ExtractTextPlugin(style.[hash].css") ] }
両者の違い:フロントエンド自動化構築ツールですが、彼らの位置づけを見ると対等ではないことがわかります.gulpは厳密に言えば、モジュール化は彼が強調したものではなく、先端開発プロセスを規範化することを目的としている.Webpackはモジュール化開発を明らかに強調しているが、ファイル圧縮合併、前処理などの機能は、彼が付属している機能にすぎない.
まとめ:gulpはgruntと比較すべきで、webpackはbrowserifyと比較すべきだ(ネット上では資料が多すぎてそう言うのは間違いないが、この一言だけでははっきりしない).gulpとwebpackが相補的なのか、交換可能なのかは、あなたのプロジェクトのニーズに依存します.vueまたはreactの単一ページアプリケーションであれば、webpackも十分です.Webpackのいくつかの機能が面倒でない場合(雪碧図はありません)、gulpと組み合わせて使用することができます.