【发布时间】：2017-02-06 19:06:22
【问题描述】：
更新 30.04.20
我的第一个问题是，对于简单项目（仅用于 Pre-Process/Concat/Minify）如何推荐此开关？
了解这个未来的“标准”，比如 Webpack 和 PostCss-NextCss-Autoprefixer 等，就像让我着迷......
所以这引出了我的下一个问题，是否有任何教程可以指导我在第一个问题中所说的简单任务？
或者是将我的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 版
【问题讨论】：