Câu hỏi đầu tiên của tôi là về cách chuyển đổi này được đề xuất cho các dự án đơn giản, chỉ để Pre-Process/Concat/Minify?Chuyển từ Gulp sang Webpack
Hiểu tương lai này "tiêu chuẩn", như Webpack ở cùng với PostCss-NextCss-Autoprefixer, vv là như ám ảnh tôi ....
Vì vậy, điều này dẫn đến câu hỏi tiếp theo của tôi, là có bất kỳ hướng dẫn rằng sẽ dẫn đến các nhiệm vụ đơn giản như tôi đã nói trong câu hỏi đầu tiên của mình?
Hoặc là một cách dễ dàng để thay đổi tôi gulpfile.js đến một webpack-config.js
nhiệm vụ bình thường của tôi trong ngụm không thực hiện những điều tốt nhất nhưng làm việc tốt:
//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'])
});
Và tôi bắt đầu sử dụng postcss rằng đang làm cho luồng công việc của tôi, mm, tốt hơn ... đôi khi.
Ý kiến của bạn về tất cả điều này là gì? Đâu là con đường đúng để bắt đầu?
EDIT // 28 Tháng sáu 2017
Tại ngày này tiến bộ của chúng tôi với Webpack 1 là siêu hài lòng và thành công, công việc của chúng tôi là khá nhanh hơn nhiều và sự phụ thuộc của chúng tôi trong công cụ này là không thể thay đổi.
Đây là webpack.config.js mà chúng ta sử dụng hàng ngày:
"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;
Nhưng lần có thay đổi và là thời gian để phát triển để Webpack 3, và bây giờ chúng tôi đang trong quá trình thay đổi webpack.config.js này lên phiên bản 3
CẬP NHẬT 24.07.17 || v1 (Tryout 10000,1)
[Move from Webpack 1 to Webpack 2/3]
Cảm ơn quan điểm của bạn, Nhưng tôi phải nói rằng quy trình làm việc của chúng tôi hoàn toàn nhanh hơn trong Webpack so với ở Gulp. – Locke
Ok, cảm ơn bạn đã cập nhật câu trả lời của mình với cấu hình webpack! – Oli