gulp入门

gulp入门

1、确定目录结构

-xiangmu
	-src     //源码
		+pages   //html
		+css	//css
		+js		//js

2、常用API

gulp.task()
含义：gulp.task(任务名称，任务处理函数)
作用：创建任务
gulp.task('html',function(){
    //找到html源文件，进行压缩，打包，放入指定目录
})

gulp.src()
含义： gulp.src(路径信息)
作用：找到源文件
书写方式：
gulp.src('./a/b.html')->找到指定的一个文件
gulp.src('./a/*.html')->找到指定目录下，指定后缀的所有文件
gulp.src('./a/**')->找到指定目录下的所有文件
gulp.src('./a/** /*')->找到a目录下所有子目录里面的所有文件
gulp.src('./a/** /*.html')->找到a目录下所有子目录里面的所有.html文件
   

gulp.dest()
含义：gulp.dest(路径信息)
作用：把一个内容放入指定目录内
gulp.dest('./abc')
	->把他接收到的内容放到abc目录下

gulp.watch()
含义：gulp.watch(路径信息，任务名称)
作用：监控指定目录文件下的文件，一旦发生变化，重新执行后面的任务
gulp.watch('./src/pages/*.html',html)
	->当指定目录下的html文件发生变化， 就会执行html这个任务

gulp.series()
含义：按照同步顺序执行任务
语法：gulp.series(任务1，任务2，任务3。。。)
作用：逐个执行多个任务，前一个任务结束，第二个任务开始

gulp.parallel()
含义：按照异步执行任务
语法：gulp.parallel(任务1，任务2，任务3.。。)
作用：并行开始多个任务

pipe()
管道函数
进入下一个流过程的管道函数
gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))

3、打包css任务

下载：npm i gulp-cssmin -S
导入：const cssmin=require('gulp-cssmin')

下载：npm i gulp-autoprefixer -S
导入：const autoPrefixer=require('gulp-autoprefixer')

const cssHandler=function (){
    return gulp
    	.src('./src/css/*.css')
    	.pipe(autoPrefixer())
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css/'))
}
//需要将这个函数导出
module.exports.cssHandler=cssHandler
//执行指令gulp cssHandler

4、打包js任务

下载:npm i -S gulp-uglify
导入:const uglify=require('gulp-uglify')

下载将es6转为es5的插件
npm i -S gulp-babel
npm i -S @babel/core
npm i -S @babel/preset-env

const gulp=require('gulp')
const uglify=require('gulp-uglify')
const babel=require('gulp-babel')

const jsHandler=function(){
       return gulp
    	.src('./src/js/*.js')
    	.pipe(babel({
           //如果是babel@7版本，就写presets:['es2015']
           presets:['@babel/ennv']   //babel@8版本
       }))
    	.pipe(uglify())  //压缩
    	.pipe(gulp.dest('./dist/js/'))
}
module.exports.jsHandler=jsHandler

//执行指令gulp jsHandler

5、打包html任务

下载：npm i -S gulp-htmlmin
导入：const htmlmin=require('gulp-htmlmin')

const gulp=require('gulp')
const htmlmin=require('gulp-htmlmin')

const htmlHandler=function(){
       return gulp
    	.src('./src/html/*.html')
    	.pipe(htmlmin({
           collapseWhitespace:true, //表示移除空格和换行
           removeEmptyAttributes:true,//表示移除空的属性(仅限于原生属性class、id等等)
           collapseBooleanAttributes:true,//移除checked类似的布尔值属性
           minifyCSS:true,//压缩内嵌式css代码(只能基本压缩，不能自动添加前缀)
           minifyJS:true,//压缩内嵌式js代码(只能基本压缩，不能转码)
           removeStyleLinkTypeAttributes:true, //移除style和link标签上的type属性
       }))   //通过配置的参数进行压缩
    	.pipe(gulp.dest('./dist/html/'))
}
module.exports.htmlHandler=htmlHandler

//执行指令gulp htmlHandler

6、配置默认任务执行打包（二选一）

//异步方法
module.exports.default=gulp.parallel(cssHandler,htmlHandler,jsHandler) 
//同步方法
module.exports.default=gulp.series(cssHandler,htmlHandler,jsHandler)	

//进行打包   gulp default 或者gulp