从Gulp切换到Webpack [英] Switching from Gulp to Webpack

问题描述

我的第一个问题是关于这个开关如何被推荐用于简单的项目，仅仅用于Pre-Process / Concat / Minify？

了解这个未来的标准 Webpack与PostCss-NextCss-Autoprefixer等一起，就像是痴迷于我....

所以这导致我的下一个问题，有没有任何教程可以指导简单的任务就像我在第一个问题中所说的那样？

或者是一种简单的方法来改变我的 gulpfile.js to a webpack-config.js

我的一些常规任务并不是最佳实践， ：

  //载入插件
 var gulp = require（'gulp'），
 runSequence = require （'run-sequence'），
 sass = require（'gulp-ruby-sass'），
 compass = require（'gulp-compass'），
 rev = require（'gulp （'del'），
 minifycss = require（'gulp-mi'），
 revDel = require（'rev-del'），
 del = require （'gulp-concat'），
 uglify = require（'gulp-uglify'），
 rename = require（'gulp-rename'），
 concat = require （'gulp-notify'），
 plumber = require（'gulp-plumber'），
 watch = require（'gulp-watch'），
 path = require（'path'）; 
 
 
 //将用于Grunt通知的标题和图标
 var notifyInfo = {
标题：'Gulp'，
图标： path.join（__ dirname，'gulp.png'）
}; 
 
 //管道工错误通知设置
 var plumberErrorHandler = {errorHandler：notify.onError（{
 title：notifyInfo.title，
图标：notifyInfo.icon， 
消息：错误：<％= error.message％>
}）
}; 
 
 //补丁
 var paths = {
 scriptsAbs：'_coffeescript /'，
 stylesAbs：'_scss /'，
 scriptsCom：'_coffeescript / '+'** / *。js'，
 stylesCom：'_scss /'+'** / *。scss'，
 cssCom：'resources / css'，
 jsCom：''资源/ js'，
 imgCom：'resources / img'
}; 
 $ b $ gulp.task（'clean'，
 function（cb）{
 del（[
 paths.cssCom +'/ *'，
 paths .jsCom +'/ *'
]，cb）; 
}）; 
 $ b $ //风格
 gulp.task（'styles'，
 function（）{
 return gulp.src（paths.stylesCom）
 .pipe （水管工（plumberErrorHandler））
 .pipe（指南针（{
 sass：'_scss'，
 css：paths.cssCom，
图片：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'}））
}） ; 
 $ b $ //脚本
 gulp.task（'scripts'，
 function（）{
 return gulp.src（paths.scriptsCom）
 .pipe （plumberErrorHandler））
.pipe（concat（'main.js'））
.pipe（gulp.dest（paths.jsCom））
 .pipe（rename（{suffix： '.min'}））
 .pipe（uglify（））
 .pipe（gulp.dest（paths.jsCom））
 .pipe（rev（））
。管道（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}））; 
 
}）; 
 
 $ b gulp.task（'default'，['clean'，'styles'，'scripts']，function（）{
 gulp.watch（paths.stylesCom， ['styles']）
 gulp.watch（paths.scriptsCom，['scripts']）
 
 // watch .php文件
 // gulp.watch（['' * .php']，['bs-reload']）
}）; 
  

我开始使用postcss来制作我的工作流程，毫米，更好.easier有时候。

你对这一切有何看法？
$ b

编辑// 2017年6月28日

<在这个日子，我们在Webpack 1上的进展非常令人满意并且成功，我们的工作流程非常快，我们对这个工具的依赖是不可改变的。

这是<我们每天使用的code> 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 = {
 
条目：{
 scripts：glob.sync（
 [
'./_javascript/*.js '，
'./_cssnext/*.pcss'
] 
）}，
 
输出：{
 path：'./resources/js '，
文件名：'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 （），
 require（postcss-browser-reporter）（），
 require（'postcss-inline-svg'）（），
 require（postcss-reporter 'postcss-urlrev'）（），
 require（'postcss-fontpath'）（），
 require（'postcss-object-fit-images'）（）
] 
}，
 
模块：{
加载器：[
 {
 test：/\.jsx?$/，
 loader：'babel-loader'
}，
 {
 test：/\.p?css$/ ，
 loader：ExtractTextPlugin.extract（
'style-loader'，
'css-loader！postcss-loader'
）
} 
] 
}，
 
 
插件：[
 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'，
端口：3000，
代理：'localhost：8002'，
浏览器：'google chrome'，
 ghostMode：false 
}）
] 
 
}; 
 
 module.exports = start; 
  

但时代已经改变，现在是时候发展到Webpack 3了，现在我们正在向将此 webpack.config.js 更改为版本3

UPDATE 24.07.17 || v1（试用10000.1）

[从Webpack 1移至Webpack 2/3 ]

/ div>

好吧，我得到了一些很好的成就感谢这个tutroial：
https://www.phase2technology.com/blog/bundle-your-front-end- with-webpack /

我的第一个方法是这样的：

webpack-config.js

 'use strict'; 
 $ b $ const webpack = require（'webpack'），
 path = require（'path'），
 autoprefixer = require（'autoprefixer'），
 glob =要求（ '水珠'）; 
 
 let script = {
 entry：{
'scripts'：glob.sync（'./_ javascript / *。js'），
}，
模块：{
加载器：[
 // 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]'
}，
 // 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]
}，
 //字体文件： eot，ttf，woff，woff2 
 {
 test：/\.(eot|ttf|woff2?)(\?.*$|$)/，
 loader：'file ？name = / fonts / [name]。[ext]'
} 
] 
}，
输出：{
 path：'./resources/js' ，
文件名：'bundle  -  [name] .js'
}，
 plugins：[
新的webpack.optimize.CommonsChunkPlugin（['scripts']，'bundle- -  [name] .js'），
 new webpack.optimize.UglifyJsPlugin（{
 compress：{
 warnings：false 
} 
}）
 ] 
}; 
 
让style = {
 entry：{
'styles'：glob.sync（'./_ nextcss / *。css'），
}，
模块：{
加载器：[
 {
测试：/\.s?css$/，
加载器：['style'，'css'，'sass '，'postcss-loader'] 
}，
] 
}，
 postcss：function（webpack）{
 return [
 require（postcss （），
 require（postcss-cssnext）（），
 require（postcss-url）（{
 addDependencyTo：webpack 
}），
 require 
 require（postcss-browser-reporter）（），
 require（postcss-reporter）（），
] 
}，
输出：{ 
 path：'./resources/css'，
 filename：'bundle  -  [name] .css'
}，
}; 
 
 module.exports = [
脚本，
风格，
]; 
  

这会生成一个包 - script.js 成功，但我遇到了与css部分有关的问题。

它不会预处理任何内容：/ b / b

如果我在此期间开始工作，我将在此更新，如果有人能指导我，我将非常感激。

My first question is about how recommended is this switch for simple projects, just to Pre-Process/Concat/Minify?

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?

Or is an easy way to change my gulpfile.js to a webpack-config.js

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'])
});

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?

EDIT // JUNE 28, 2017

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.

This is the webpack.config.js that we use every day:

"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;

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

UPDATE 24.07.17 || v1 (Tryout 10000.1)

[ Move from Webpack 1 to Webpack 2/3 ]

解决方案

Ok , I'm getting some great achieves thanks to this tutroial : https://www.phase2technology.com/blog/bundle-your-front-end-with-webpack/

My first approach is this:

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,
];

This generates a bundle--script.js successfully , but I'm having some issues with the css part.

It won't pre-process anything :/

I will be updating here if I get to work this in the meantime, I will really appreciate much, if someone can guide me.

这篇关于从Gulp切换到Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！