gulp yarn 研发环境的搭建

研发环境的搭建

目标：支持热更新，实现检测代码更改，刷新浏览器，研发和生成编译出不同的版本

参考：npmjs.com

yarn:更稳定，比npm更稳定

开发依赖：-D ， 主要用于开发环境，上线的时候不会被打包丢到生产环境

生产环境：在上线时会被打包

0 yarn全局安装：  

npm i yarn -global

1 yarn global add gulp-cli

安装gulp全局命令行依赖  

2 npm init -y

生成package.json，里面可以查看开发依赖的信息

3 yarn add gulp -D

-D和--dev一样，安装的是开发依赖环境，D即development

4 yarn add gulp-webserver -D

安装开发依赖，gulp开启前端服务

5 yarn add node-sass gulp-sass -D

安装开发依赖，sass解析包，node-sass是gulp-sass的前提

6 yarn add gulp-concat -D

安装开发依赖，文件合并插件

7 yarn add webpack-stream -D 

安装开发依赖，编译、解析js文件

8 yarn add babel-loader @babel/core  @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D

安装开发依赖，@代表按需加载，用到那一部分装那一部分

 

gulpfile.js

//series:可以组合多个任务，是串行的执行方式
const { src, series, dest, watch } = require('gulp');
const sass = require('gulp-sass');
const gulpServer = require('gulp-webserver');
const concat = require('gulp-concat');
const webpackStream = require('webpack-stream');
//path是nodejs的内置模块
const path = require('path');
function copyHtml() {
    //表示views目录下所有的html文件
    return src('./src/views/**/*.html')
        //异常的捕获必须要写，否则编译有问题
        //将src里面的文件输出到dest指定目录里
        .pipe(dest('./dev/'));
    // todo..
}

function compileCss() {
    return src('./src/style/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('all.css'))
        .pipe(dest('./dev/'));
}

function compileJs() {
    // return src('./src/js/**/*.js')
    // .pipe(dest('./dev/'));
    //使用webpack
    return src('./src/js/**/*.js')
        .pipe(webpackStream({
            //指定编译的模式，development，production：生产模式
            mode: 'development',//开发模式
            //打包的入口文件
            entry: './src/js/app.js',
            //完整的输出目录
            output: {
                //绝对路径,__dirname是node环境下的全局变量,是工程目录，二参是打包输出目录，组成完整输出目录
                path: path.resolve(__dirname, './dev/'),
                filename: 'all.js'
            },
            module: {
                //装有对象的数组
                rules: [
                    {
                        //正则匹配
                        test: /^\.js$/,
                        //排除
                        exclude: /node_modules/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env'],//预设，在babel转义过程中根据配置转换
                                plugins: ['@babel/plugin-transform-runtime']//提取公共的方法
                            }
                        }
                    }
                ]
            }
        }))
        //输出
        .pipe(dest('./dev/'));
}

function startServer() {
    return src('./dev/')
        .pipe(gulpServer({
            port: 9090,
            host: '127.0.0.1',
            //是否支持热更新
            livereload: true,
            //打开目录
            // directoryListing:true,
            //打开浏览器，不需要手动打开
            open: true
        }));
}

function watchFile() {
    //监控scss文件变化
    watch('./src/style/**/*.scss', (cb) => {
        //添加任务
        compileCss();
        cb();
    })
    watch('./src/js/**/*.js', (cb) => {
        //添加任务,需要添加callback
        compileJs(cb);
    })
    watch('./src/views/**/*.html', (cb) => {
        copyHtml();
        cb();
    })
}

//顺序执行，启动服务在监控
exports.default = series(copyHtml, compileJs, compileCss, startServer, watchFile);