搭建M站环境

安装node
搭建gulp
art-template模板引擎
yarn:
yarn init -y 创建package.json
yarn add gulp @3.9.1 (dev)
yarn add gulp-webserver --dev
yarn add webpack-stream --dev
yarn add (babel loader) --dev
yarn add (疑难-plugin) --dev
yarn add gulp-sass node-sass --dev
yarn add string-loader --dev
yarn add http-proxy-middleware --dev

yarn add del --dev
yarn add gulp-rev --dev
yarn add gulp-rev-collector --dev

yarn add yo3 --dev
创建gulpfile.js :

//const gulp = require('gulp')
const path = require('path')
const {src,dest,series,parallel,watch} = require('gulp')
//
const gulpWebserver = require('gulp-webserver')
const webpackStream = require('webpack-stream')
const gulpSass = require('gulp-sass')
const proxy = require('http-proxy-middleware')
const del = require('del')
发布
const rev = require('rev')
const revCollector = require('gulp-rev-collertor')

1.拷贝index.html等到dev文件夹

copyhtml/images/iocns()

//任务的回调一定要有返回值，返回值全部都是异步操作
//如果不返回值，需要调用一个callback

gulp.task('copyhtml',()={
   return  gulp.src('./*.html').pipe(gulp.dest('./dev'))
})
或
gulp.task('copyhtml',(cb)={
    gulp.src('./index.html').pipe(gulp.dest('./dev'))
    cb()
})
//gulp.task('default',['copyhtml'])

1.1
function copyhtml(){
return  src('./index.html').pipe(gulp.dest('./dev'))
}
function copyimages(){
return  src('./index.html').pipe(gulp.dest('./dev'))
}
function copyicons(){
return  src('./index.html').pipe(gulp.dest('./dev'))
}

2.启动一个server webserver()

gulp.task('webserver',()=>{
    return gulp.src('./dev')
    .pipe(webserver({
       // path:'/',
       //host:'localhost'
       port:8000
       livereload:true,
        //directoryListing:true,
       //open:true,
    }))
})

2.1
function webserver(){
return src('./dev/')
    .pipe(gulpWebserver({
       port:8000,
       livereload:true,
       middleware:[
            proxy('./api',{
                target:'url',
                changeOrigin:true,//访问不同的域名，开启
                pathRewrite:{
                    '^/api' : '' ,
                }
            })
       ]
    }))
}

3.编译js模块 packjs()

function packjs(){
    return src('./src/app.js').
    pipe(webpackStream({
    mode:'development';
    entry:{
        app: './src/app.js'
    }
    output:{
        filename : '[name].js', //[name] == app
        path:path.resolve(__dirname,'./dev')
    }
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'',
                    options:{
                        presets:[],
                        plugins:[]
                    }
                },
            }
        ]
    }
    }))
    .pipe(dest('./dev/scripts'))
}

打包执行

1
gulp.task('default',gulp.series('copyhtml','webserver'))

1.1
//私有任务和公有任务

exports.default = series(parallel(packCSS,packjs,copylibs,copyimages,copyicons),copyhtml,webserver,watcher,revcoll)

packCSS()

function packCSS(){
    return src('./src/style/app.scss')
    .pipe(gulpSass().on('error'),gulpSass.logError)
    .pipe(dest('./dev/styles'))
}

watcher

    function watcher(){
        watch('./src/icons/**/*',series((clear('./dev/icons')),copyicons))
        watch('./src/images/**/*',series((clear('./dev/images')),copyimages))
        watch('./src/libs/**/*',series((clear('./dev/libs')),copylibs))
        watch('./*.html',series((clear('./dev/html')),copyhtml))
        watch('./src/style/**/*',series(packCSS))
        watch(['./src/**/*','!./src/libs**/*','!src/styles/**/*'],series(packjs))
    }

clear()

    function clear(target){
        return function(){
            return del(targe)
            }
    }

revColl()

    function rev(){
        return src([])
    }

创建src文件夹
创建index.html

app.js

const Name  = require('./controllers/Name')

async function get Name(){
    const name = await Name.getName()
}

Name.js

npm:
npm init -y
npm install --save-dev gulp