更新于2020年4月30日
我的第一个问题是，对于简单的项目，仅为了预处理 /合并/缩小，建议使用此转换吗？
理解未来的“标准”，例如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的工作。