多页面打包还是选择gulp+webpack

现在目前spa项目泛滥，需要安装这安装那，看这个文档还要看那个文档，增加了开发成本。但是实际在工作中，后台只是要一个样式自己写逻辑的场景也不少。但是在现在不用个自动化打包工具就out的时代，咱们还是使用gulp+webpack去实现这种需求吧！

打包scss

安装依赖

cnpm i -D gulp-less

任务

export function css() {
    return gulp.src(paths.styles.src)
        .pipe(less())
        .pipe(gulp.dest(paths.styles.dest));
}

● 压缩

gulp-clean-css

import cleanCss from 'gulp-clean-css';
export function cssPack() {
    return gulp.src(paths.styles.src)
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(cleanCss())
        .pipe(gulp.dest(paths.styles.dest));
}

自动前缀

安装依赖

cnpm i -D gulp-autoprefixer

配置

"browserslist": [
        "ie >= 9",
        "ie_mob >= 10",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 7",
        "opera >= 23",
        "ios >= 7",
        "android >= 4.4",
        "bb >= 10"
    ]

公共html

安装依赖

cnpm i -D gulp-file-include

配置

export function html() {
    return gulp.src(paths.htmls.src)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(paths.htmls.dest));
}

使用

<div>
        页面，看看！ 
        @@include('./include/component.html')
    </div>

sourcemap的支持
gulp 4.0 已经不需要额外增加插件

服务器

● 使用 browserSync 启动服务，
● 保存刷新，使用watch 监听文件改变且执行任务

安装依赖

cnpm i -D browser-sync

配置

function serve() {
    browserSyncCrt.init({
        browser:   'chrome',
        server: "./dist",
        open: false, // 打开浏览器
        startPath: 'view' // 启动默认打开对应页面
    });
    // 监听文件变化
    gulp.watch([paths.htmls.src], html).on('change', browserSyncCrt.reload);
    gulp.watch([paths.styles.src], css).on('change', browserSyncCrt.reload);
}

打包js

使用webpack打包，功能有。js需要自己手动引入
● 对es6 降级兼容，使用babel
● 提供全局引用jq等插件，providePlugin

安装依赖

cnpm i -D webpack-stream webpack
@babel/core @babel/plugin-transform-runtime
@babel/preset-env
babel-loader
vinyl-named
del

配置

export function js() {
    return gulp.src(paths.scripts.src)
        .pipe(named())
        .pipe(webpackStream(webpackDev))
        .pipe(gulp.dest(paths.scripts.dest));
}



webpack.dev.conf.js

import webpack from 'webpack';

module.exports = {
    watch: true,
    resolve: {
        extensions: ['.js']
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules)/,
            include: /src/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-runtime']
                }
            }]
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jquery: "jquery",
            jQuery: 'jquery',
            "window.jQuery": "jquery"
        })
    ]
}

注意：全局使用jq，配置ProvidePlugin，而且还需要安装jq。

打包图片

安装依赖

cnpm i -D gulp-imagemin imagemin-pngquant

配置

export function img() {
    return gulp.src(paths.images.src)
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{
                removeViewBox: false //不要移除svg的viewbox属性
            }],
            use: [pngquant()]
        })))
        .pipe(gulp.dest(paths.images.dest));
}