前端开发gulp + Webpack使用方法

前端开发手机测试工具
前端开发手机横屏
开源前端 手机开发

可能使用到的插件有:
webpack-stream:webpack的gulp插件
vinyl-named:该插件保证webpack生成的文件名能够和原文件对上
style-loader:将css插入到页面的style标签
css-loader:是处理css文件中的url()等
url-loader:引入图片
raw-loader:原样输出
gulp-changed:判断文件是否更改,只传递更改过的文件

假设编译目录为:
文件目录

文件夹
gulp-file.js
package.json
webpack.config.js
node_modules
src # 源代码
jade
sass
es # ecma6
app # webpack
img
build # 编译后的文件
img
app # webpack打包后的文件

例子:
gulpfile.js

const webpack = require(‘webpack-stream’)
const webpackConfig = require(‘./webpack.config.js’)
const dirname = __dirname
gulp.task(‘webpack’, () => {
    const src = `${dirname}/build/js/app/**/*.js`,
        build = `${dirname}/build/app`
    gulp
        .src(src)
        .pipe(named())
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest(build))
})
gulp.task(‘default’, [‘webpack’])

webpack根据“文件夹/build/js/app”里面的js,将文件打包到“文件夹/build/app”里面。
如果选择不打包css和图片,可以不需要webpack.config.js。

webpack.config.js配置:
webpack.config.js

/* webpack配置 */
const webpack = require(‘webpack’)
const config = {
    output: {
        filename: ‘app.[name].js’,
    },
    module: {
        loaders: [
            { test: /^.*\.css$/, loader: ‘style-loader!css-loader’ },
            { test: /^.*\.(png|jpg)$/, loader: ‘url-loader’ },
        ],
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
        }),
    ],
}
module.exports = config

output:定义输出的文件名的规则。
new webpack.optimize.UglifyJsPlugin:对webpack打包后生成的文件进行压缩
loaders::不同的文件进行不同的处理,loader的规则是从右往左。这里对css和图片进行处理,如果想只对css进行处理的话,可以使用raw-loader插件loaders

{test: /^.*\.css$/, loader: ‘style-loader!raw-loader’}

不对css中的url进行处理

自动监视打包:
gulpfile.js

const webpack = require(‘webpack-stream’)
const webpackConfig = require(‘./webpack.config.js’)
const changed = require(‘gulp-changed’)
const babel = require(‘gulp-babel’)
const dirname = __dirname
gulp.task(‘ecma6’, () => {
    const src = `${dirname}/src/es/**/*.js`,
        build = `${dirname}/build/js`
    gulp
        .src(src)
        .pipe(
            changed(build, {
                extension: ‘.js’,
            }),
        )
        .pipe(
            babel({
                presets: [‘es2015’],
            }),
        )
        .pipe(gulp.dest(build))
})
gulp.task(‘webpack’, () => {
    const src = `${dirname}/build/js/app/**/*.js`,
        build = `${dirname}/build/app`
    gulp
        .src(src)
        .pipe(named())
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest(build))
})
gulp.task(‘default’, [‘webpack’], () => {
    gulp.watch(
        [`${dirname}/build/css/**/*.css`, `${dirname}/build/js/**/*.js`],
        [‘webpack’, ‘reload’],
    )
})

因为是将build里面编译后的文件进行打包,所以应该监视的是build文件夹,但是由于gulp每次修改文件后所有匹配的文件都要更新,造成webpack多次打包。
所以用gulp-changed插件保证gulp只传递更改过的文件,避免webpack多次打包

前端开发不能本地手机测试
前端开发手机端适配问题
前端开发在手机上面看样式
» 本文来自:前端开发者 » 《前端开发gulp + Webpack使用方法》
» 本文链接地址:https://www.rokub.com/6281.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!