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'</