gulp打包,做哪些基础操作

首先gulp是什么?

gulp是基于node的自动化打包工具
gulp可以对我们的代码进行压缩,混淆和合并的操作

gulp工具的安装,检查和卸载

安装: npm install --global gulp
卸载: npm uninstall --global gulp
检查: npm --version 如果安装成功了,会显示gulp的版本号

打包的操作步骤

1.有项目的原始代码和素材组成的文件夹,不同类型的代码要分门别类的放好

2.初始化当前的项目 终端下执行npm init -y
执行这个指令后,会生成一个package.json文件,记录项目过程中,包的使用情况
3.在项目的根目录下,创建gulpfile.js文件,在这个文件里面,正式书写我们的打包规则
在终端里,进入到项目文件夹下,执行 npm i -D gulp下载gulp第三方依赖包.这个gulp包和上面那个全局gulp包虽然长得一样,但是在项目里起的作用却不一样,还是需要再下一个.
这个gulp引入后，自带一些方法：
src(‘路径’)这个方法就是打开某个路径
pipe(操作)这个方法就是执行什么操作
dest(‘路径’)将打包好的文件塞到某个目录里,如果目录不存在,就创建一个
parallel(方法1,方法2,……)并行执行多个任务
series(方法1,方法2,……)逐个执行多个任务
watch(‘文件’,方法)自动监控文件,如果有文件修改了,就执行对应的方法
打开gulpfile.js,进行规则的书写

//项目根目录下 安装gulp
//引入进来
const gulp=require('gulp')

//下载引入压缩html的包
const htmlmin=require('gulp-htmlmin')
//下载引入压缩css的包
const cssmin=require('gulp-cssmin')
//下载并且引入处理css前缀的包
const antoprefixer=require('gulp-autoprefixer')
//下载引入压缩js包
const jsmin=require('gulp-uglify')//这个包不能处理es6的语法
//下载引入将es6转为es5的包
const babel=require('gulp-babel')
//终端上也要下载@babel/core 和@babel/preset-env因为babel包依赖这两个包,但是不必单独导入进来
//下载引入del包
const del=require('del')
//下载引入开启服务器的包
const webserver=require('gulp-webserver')

//html的压缩方法  去掉了空格
const htmlHandler=()=>{
    return gulp.src('./src/html/*.html')//处理这个路径下的所有html
                .pipe(htmlmin({
                    removeAttributeQuotes:true,//去掉属性的引号
                    removeComments:true,//去掉注释
                    collapseBooleanAttributes:true,//去掉值为布尔值的属性
                    collapseWhitespace:true,//去掉空格
                    minifyCSS:true,//内部css样式压缩
                    minifyJS:true//内部js的压缩
                }))
                .pipe(gulp.dest('./dist/html'))//压缩好,塞进这里面
}

//css的压缩方法  去掉了空格
const cssHandler=()=>{
    return gulp.src('./src/css/*.css')//处理这个路径下的所有css
                .pipe(antoprefixer())//给样式添加前缀
                .pipe(cssmin()).pipe(gulp.dest('./dist/css'))
}

//js的压缩方法  去掉了空格
const jsHandler=()=>{
    return gulp.src('./src/js/*.js')
                .pipe(babel({
                    presets:['@babel/env']
                }))//将js中的所有es6语法转化为es5
                .pipe(jsmin())
                .pipe(gulp.dest('./dist/js'))
}

//img打包转移,图片压缩,容易失帧,并且设计师对图片已经进行了处理,一般不需要我们再处理,就不要压缩了
const imgHandler=()=>{
    return gulp.src('./src/img/**')
                .pipe(gulp.dest('./dist/img'))
}

//lib的打包转移
const libHandler=()=>{
    return gulp.src('./src/lib/**')
                .pipe(gulp.dest('./dist/lib'))
}
//打包前删除dist目录
const delDist=()=>{
    return del(['./dist'])
}
//开启服务器
const webServerHandler=()=>{
    return gulp.src('./dist')  //定义了根目录
                .pipe(webserver({
                    /*host:'www.wsysy.com',可自定义一个域名,不过不能是已经存在的,定义一个没存在的,然后修改本机hosts文件的设置,就可以访问*/
                    host:'localhost',
                    port:8888,
                    open:'./html/wsy.html',//设置默认打开页面
                    livereload:true//dist中有代码跟新,页面是否自动刷新
                }))
}

const watchHandler=()=>{//自动监控文件,如果有文件修改了,就执行对应的方法
    gulp.watch('./src/html/*.html',htmlHandler)
    gulp.watch('./src/html/*.css',cssHandler)
    gulp.watch('./src/html/*.js',jsHandler)
    gulp.watch('./src/html/**',imgHandler)
    gulp.watch('./src/html/**',libHandler)
}

module.exports.default=gulp.series(
    delDist,
    gulp.parallel(htmlHandler,cssHandler,jsHandler,imgHandler,libHandler),
    webServerHandler,
    watchHandler
)