从 Gulp 切换到 Webpack [英] Switching from Gulp to Webpack
问题描述
更新 30.04.20
[ 迁移到 Webpack ]
我的第一个问题是，对于简单项目(仅用于 Pre-Process/Concat/Minify)如何推荐此开关?
My first question is about how recommended is this switch for simple projects, just to Pre-Process/Concat/Minify?
了解这个未来的标准"，比如 Webpack 和 PostCss-NextCss-Autoprefixer 等，就像让我着迷......
Understanding this future "standards", like Webpack in together with PostCss-NextCss-Autoprefixer, etc. is like obsessing me....
所以这引出了我的下一个问题，是否有任何教程可以指导我在第一个问题中所说的简单任务?
So this leads to my next question , is there any tutorial that will guide to simple tasks like the one I told in my first question?
或者是将我的 gulpfile.js 更改为 webpack-config.js
Or is an easy way to change my gulpfile.js to a webpack-config.js
我在 gulp 中的正常任务不是最佳实践，但效果很好:
My normal tasks in gulp are not the best practices but work well :
//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，这让我的工作流程变得更好……有时更轻松.
And I'm starting to use postcss that is making my workflow, mm, better..easier sometimes.
你对这一切有什么看法?正确的起点在哪里?
What are your opinions on all this? Where is the right path to start?
编辑//2017 年 6 月 28 日
到目前为止，我们在 Webpack 1 方面的进展非常令人满意且非常成功，我们的工作流程要快得多，并且我们对这个工具的依赖是不可改变的.
At this date our progress with Webpack 1 were super satisfactory and successfully , our workflow is pretty much faster and our dependence in this tool is Unchangeable.
这是我们日常使用的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 版
But times has change and is time to evolve to Webpack 3 , and now we are in the progress to change this webpack.config.jsto the version 3
推荐答案
对于简单的项目，我完全不推荐切换.最后，我认为这是个人喜好，我更喜欢通过易于理解的 javascript (gulp) 进行后处理.
For simple projects, I would not recommend the switch at all. In the end it's a personal taste I think, and I prefer postprocessing through easily understandable javascript (gulp).
正如您在问题中所说，您当前的设置运行良好:那么为什么要修复没有损坏的东西呢?我将专注于重构您的 gulp 代码以使其更具可读性，将长函数拆分为较小的 gulp 任务.
As you've said in your question, your current setup works well: so why fix something that's not broken? I'd focus on refactoring your gulp code to make it a bit more readable, split the long functions into smaller gulp tasks.
最后，使用 webpack 需要学习很多与 webpack 相关的特定配置选项，而使用 gulp 时，您大多只是管道 vanilla js 命令.
In the end, using webpack requires learning a lot of specific webpack related config options, while with gulp you're mostly just piping vanilla js commands.
这篇关于从 Gulp 切换到 Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
