web-dev-qa-db-ja.com

GulpからWebpackへの切り替え

私の最初の質問は、単純なプロジェクトに対して、前処理/連結/縮小するためだけに、この切り替えがどの程度推奨されるかについてです。

PostCss-NextCss-Autoprefixerなどと一緒にWebpackを使用するなど、この将来の「標準」を理解することは、私を夢中にさせるようなものです。

それで、これは私の次の質問につながります、私の最初の質問で言ったような簡単なタスクにガイドするチュートリアルはありますか？

または、gulpfile.jsをwebpack-config.jsに変更する簡単な方法です。

Gulpでの私の通常のタスクはベストプラクティスではありませんが、うまく機能します：

//load plugins
var gulp    = require('gulp'),
runSequence = require('run-sequence'),
sass        = require('gulp-Ruby-sass'),
compass     = require('gulp-compass'),
rev         = require('gulp-rev'),
revDel      = require('rev-del'),
del         = require('del'),
minifycss   = require('gulp-minify-css'),
uglify      = require('gulp-uglify'),
rename      = require('gulp-rename'),
concat      = require('gulp-concat'),
notify      = require('gulp-notify'),
plumber     = require('gulp-plumber'),
watch       = require('gulp-watch'),
path        = require('path');


  //the title and icon that will be used for the Grunt notifications
  var notifyInfo = {
    title: 'Gulp',
    icon: path.join(__dirname, 'gulp.png')
  };

  //error notification settings for plumber
  var plumberErrorHandler = { errorHandler: notify.onError({
    title: notifyInfo.title,
    icon: notifyInfo.icon,
    message: "Error: <%= error.message %>"
  })
};

//patches
var paths = {
  scriptsAbs : '_coffeescript/',
  stylesAbs: '_scss/',
  scriptsCom : '_coffeescript/' + '**/*.js',
  stylesCom :'_scss/' + '**/*.scss',
  cssCom : 'resources/css',
  jsCom : 'resources/js',
  imgCom : 'resources/img'
};

gulp.task('clean',
  function (cb) {
    del([
      paths.cssCom + '/*',
      paths.jsCom + '/*'
      ], cb);
  });

//styles
gulp.task('styles',
  function() {
    return gulp.src(paths.stylesCom)
    .pipe(plumber(plumberErrorHandler))
    .pipe(compass({
      sass: '_scss',
      css: paths.cssCom,
      image: paths.imgCom,
      style: 'expanded',
      relative: true,
      require: ['normalize-scss', 'susy']
    }))
    .pipe(gulp.dest(paths.cssCom))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest(paths.cssCom))
    .pipe(rev())
    .pipe(gulp.dest(paths.cssCom))
    .pipe(rev.manifest())
    .pipe(revDel({ dest: paths.cssCom }))
    .pipe(gulp.dest(paths.cssCom))
    .pipe(notify({ message: 'Styles task completed' }))
  });

//scripts
gulp.task('scripts',
  function() {
    return gulp.src(paths.scriptsCom)
    .pipe(plumber(plumberErrorHandler))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(paths.jsCom))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.jsCom))
    .pipe(rev())
    .pipe(gulp.dest(paths.jsCom))
    .pipe(rev.manifest())
    .pipe(revDel({ dest: paths.jsCom }))
    .pipe(gulp.dest(paths.jsCom))
    .pipe(notify({ message: 'Scripts Concatenated completed' }))
  // .pipe(reload({stream:true}));

});


gulp.task('default', ['clean','styles','scripts'], function(){
  gulp.watch(paths.stylesCom, ['styles'])
  gulp.watch(paths.scriptsCom, ['scripts'])

//watch .php files
// gulp.watch(['*.php'], ['bs-reload'])
});

そして、私は自分のワークフローをより良くするpostcssを使い始めています。

これについてどう思いますか？開始する正しいパスはどこですか？

編集// 2017年6月28日

この日付で、Webpack 1の進歩は非常に満足のいくものであり、成功しました。ワークフローはかなり高速であり、このツールへの依存は変わりません。

これは、私たちが毎日使用するwebpack.config.jsです。

"use strict";

var webpack = require('webpack');
var glob = require('glob-all');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

let start = {

    entry: {
        scripts: glob.sync(
            [
            './_javascript/*.js',
            './_cssnext/*.pcss'
            ]
        )},

    output: {
        path: './resources/js',
        filename: 'bundle--[name].js'
    },
    watchOptions: {
        poll: true
    },

    postcss: function (webpack) {
        return [
            require("postcss-import")({addDependencyTo: webpack}),
            require("postcss-url")(),
            require("precss")(),
            require("postcss-cssnext")(),
            require('postcss-font-magician')(),
            require("postcss-reporter")(),
            require("postcss-browser-reporter")(),
            require('postcss-inline-svg')(),
            require('postcss-urlrev')(),
            require('postcss-fontpath')(),
            require('postcss-object-fit-images')()
        ]
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            {
                test: /\.p?css$/,
                loader: ExtractTextPlugin.extract(
                    'style-loader',
                    'css-loader!postcss-loader'
                )
            }
        ]
    },


    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: 'scripts', filename: 'bundle--[name].js'}),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("../css/bundle--styles.css"),
        new BrowserSyncPlugin({
            Host: 'localhost',
            port: 3000,
            proxy: 'localhost:8002',
            browser: 'google chrome',
            ghostMode: false
        })
    ]

};

module.exports = start;

しかし、時代は変わり、Webpack 3に進化する時が来ました。現在、このwebpack.config.jsをバージョン3に変更する作業が進行中です。

UPDATE 24.07.17 || v1（トライアウト10000.1）

[ Webpack1からWebpack2/3に移動 ]

gulpwebpackpostcss
15
Locke

単純なプロジェクトの場合、切り替えはまったくお勧めしません。結局、それは私が思う個人的な好みであり、私は簡単に理解できるjavascript（gulp）による後処理を好みます。

あなたがあなたの質問で言ったように、あなたの現在のセットアップはうまくいきます：それで、なぜ壊れていない何かを修正するのですか？ gulpコードをリファクタリングして少し読みやすくし、長い関数を小さなgulpタスクに分割することに焦点を当てます。

結局、webpackを使用するには、特定のwebpack関連の構成オプションをたくさん学ぶ必要がありますが、gulpを使用すると、ほとんどの場合、Vanillajsコマンドをパイプするだけです。

5
Oli

わかりました、私はこのtutroialのおかげでいくつかの素晴らしい成果を得ています：https://www.phase2technology.com/blog/bundle-your-front-end-with-webpack/

私の最初のアプローチはこれです：

webpack-config.js

'use strict';

const webpack    = require('webpack'),
    path         = require('path'),
    autoprefixer = require('autoprefixer'),
    glob         = require('glob');

let script = {
    entry: {
         'scripts': glob.sync('./_javascript/*.js'),
    },
    module: {
        loaders: [
            // Javascript: js, jsx
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            // CSS: scss, css
            {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass', 'postcss-loader']
            },
            // SVGs: svg, svg?something
            {
                test: /\.svg(\?.*$|$)/,
                loader: 'file-loader?name=/img/[name].[ext]'
            },
            // Images: png, gif, jpg, jpeg
            {
                test: /\.(png|gif|jpe?g)$/,
                loader: 'file?name=/img/[name].[ext]'
            },
            // HTML: htm, html
            {
                test: /\.html?$/,
                loader: "file?name=[name].[ext]"
            },
            // Font files: eot, ttf, woff, woff2
            {
                test: /\.(eot|ttf|woff2?)(\?.*$|$)/,
                loader: 'file?name=/fonts/[name].[ext]'
            }
        ]
    },
    output: {
        path: './resources/js',
        filename: 'bundle--[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(['scripts'], 'bundle--[name].js'),
        new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
    }
})
]
};

let style = {
    entry: {
        'styles': glob.sync('./_nextcss/*.css'),
    },
    module: {
        loaders: [
            {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass', 'postcss-loader']
            },
        ]
    },
    postcss: function (webpack) {
        return [
            require("postcss-import")({
                addDependencyTo: webpack
            }),
            require("postcss-url")(),
            require("postcss-cssnext")(),
            require("postcss-browser-reporter")(),
            require("postcss-reporter")(),
        ]
    },
    output: {
        path: './resources/css',
        filename: 'bundle--[name].css'
    },
};

module.exports = [
    script,
    style,
];

これによりbundle--script.jsが正常に生成されますが、css部分に問題があります。

何も前処理しません：/

それまでの間、これを実行できるようになったら、ここで更新します。誰かが私を案内してくれれば、本当に感謝しています。

5
Locke

GulpとWebpackの概念はまったく異なります。Gulphowにフロントエンドコードを段階的にまとめるように指示しますが、Webpack設定ファイルを介して必要なもの。したがって、切り替える場合、簡単な1対1のマッピングはありません。

当社は昨年、GulpからWebpackに移行しました。 2つのツールの違いを理解することは、移行に非常に役立つことがわかりました。これが私が書いた考え方の変化を説明する短い記事（5分読んだ）です： https://medium.com/@Maokai/compile-the-front-end-from-gulp-to-webpack-c45671ad87fe

移行には少し時間がかかりましたが、Gulpで行ったすべてのことをWebpackに移行する方法を見つけました。つまり、Gulpで行ったすべてのことは、Webpackでも実行できますが、その逆はできません。

1
Maokai

それは質問への答えに依存します：あなたはcssをwebpackバンドルの一部としてロードすることに何か利点があると思いますか？ <link>を使用してcssをブラウザーにロードする場合、おそらくwebpackは何の利点ももたらしません。

「1つのツールを持っている」ことを除いて。しかし、1つの構成ではありません-cssのみをコンパイルして開発をスピードアップする特定のwebpack構成が必要であり（jsのコンパイルは非常に遅い）、達成するのはそれほど簡単ではないことを忘れないでください（コンパイル時に現在のwebpack4にはいくつかの副作用がありますcssのみ）。

0
Roman Pokrovskij

Postcssローダーは必要ないと思います。つまり、とりあえず。あるツールから別のツールに移動しているだけなので、できるだけスリムに保つ必要があります。

{ 
  test: /(\.css|\.scss)$/, 
  include: path.join(__dirname, 'src'), 
  loaders: ['style-loader', 'css-loader', 'sass-loader'] 
}

コード内のincludeは、構成によって異なることに注意してください。その後、私はあなたが一気に持っている「相対的な」パスを取り除くことを検討します。 developmentおよびproduction環境を維持したい場合は、問題が発生する可能性があります。ただ個人的な経験。

0
Ematipico