博客

gulp是什么？

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。

设定gulp打包压缩

1、创建项目文件夹

2、初始化项目文件夹

3、下载gulp相关依赖包

4、按照gulp指定的语法规范，设定配置gulp打包压缩规范

gulp依赖包的下载过程

1、创建项目文件夹 ，src 存储源文件，dist 存储压缩文件。

2、项目文件夹初始化，cmd命令：npm init -y

3、gulp依赖包的下载安装

(1) 下载gulp全局依赖包，cmd命令：npm i -g gulp

(2) 下载gulp开发依赖包

2-1 gulp开发依赖包，cmd命令：npm i -D gulp

2-2 css文件 打包压缩需要的依赖包

自动给css代码添加前缀，cmd命令：npm i -D gulp-autoprefixer

需要配置package.json文件中的配置设定，实际项目中，浏览器版本的兼容根据不同的项目做响应的设定：

“browserslist”: [

“last 2 version” ,      所有浏览器 兼容 最新的2个版本

“FireFox > 90” ,        单独设定 火狐浏览器 兼容 90以上版本

“IOS > 9”               单独设定 苹果浏览器 兼容 9以上版本

]

打包压缩css程序代码，cmd命令：npm i -D gulp-cssmin

2-3 JavaScript文件，打包压缩需要的依赖包

将其他版本的JavaScript语法转化为 ES5 语法，cmd命令：

npm i -D gulp-babel

npm i -D @babel/preset-env

npm i -D @babel/core

将ES5语法的JavaScript程序打包压缩，cmd命令：npm i -D gulp-uglify

如果js程序中有promise 和 async await，需要再多加一个js配置文件，cmd命令：polyfill.js

2-4 html文件 打包压缩需要的依赖包，cmd命令：npm i -D gulp-htmlmin

2-5 sass文件 打包压缩需要的依赖包

2-5-1 下载全局node-sass 依赖包，cmd命令：npm i -g node-sass

如果能直接下载成功最好，如果下载失败需要配置专门的下载地址：npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ 先清除node下载缓存，再次执行cmd命令：npm i -g node-sass

2-5-2 下载sass开发依赖包，cmd命令：npm i -D gulp-sass@4.0.0

2-6 下载gulp服务器相关依赖包，cmd命令：npm i -D gulp-webserver

2-7 下载删除程序相关依赖包，cmd命令：npm i -D del

如果 多个依赖包的安装方式相同 可以 一次下载多个依赖包，cmd命令 ：

npm i -D gulp gulp-autoprefixer gulp-cssmin  gulp-babel @babel/preset-env @babel/core gulp-uglify gulp-htmlmin gulp-webserver del gulp-sass@4.0.0

最终下载完成是两个全局依赖包 gulp  node-sass，11个 开发依赖包。

安装配置gulp文件

gulp程序 打包压缩配置文件的 设定 每个项目 基本都是相同的，只有 配置参数 文件路径 有可能不同，打包规范原则 基本都是相同的。

gulp文件的步骤

1、在项目文件夹 src 中，创建一个固定的文件gulpfile.js，gulp规定的专门设定gulp打包压缩程序的文件名称。

2、在 gulpfile.js 文件中 定义 gulp打包压缩程序

2-1 导入下载的依赖包，导入加载依赖包 只需要 导入gulp-babel，gulp-babel 会 自动导入 加载@babel/preset-env    @babel/core

2-2 根据 不同的文件类型 设定不同的打包压缩配置文件

需要 打包压缩有 css、js、html、sass

不需要 打包压缩有 图片、音频、视频、后端程序

gulpfile.js文件的代码

//1  导入加载 依赖包

//gulp开发依赖包
const gulp = require('gulp');

//css开发依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

//js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

//html开发依赖包
const htmlmin = require('gulp-htmlmin');

//sass开发依赖包
const sass = require('gulp-sass');

//服务器开发依赖包
cosnt webserver = require('gulp-webserver');

//删除开发依赖包
const del = require('del');


//2  不同类型文件的打包压缩规范

//2-1 需要压缩的文件]

//2-1-1 css文件
const cssHandler = function(){
   return gulp.src('.src/css/*.css').pipe( autoprefixer() ).pipe( cssmin() ).pipe( gulp.dest('./dist/css') );
}

//2-1-2 js文件
const jsHandler = function(){
   return gulp.src('./src/js/*.js').pipe( babel({ presets : ['@babel/env'] }) ).pipe( 
uglify() ).pipe( gulp.dest('./dist/js') );
}

//2-1-3 html文件
const htmlHandler = function(){
   return gulp.src('./src/page/*.html').pipe( htmlmin({
                                            removeAttributeQuotes : true ,
                                            removeComments : true ,
                                            removeScriptTypeAttributes : true ,
                                            removeStyleLinkTypeAttributes : true ,
                                            collapseBooleanAttributes : true ,
                                            collapseWhitespace : true ,
                                            minifyCSS : true ,
                                            minifyJS : true ,
                                        }) ).pipe( gulp.dest('./dist/pages') );
}

//2-1-4 sass文件
const sassHandler = function(){
   return gulp.src('.src/sass/*.scss').pipe( sass() ).pipe( autoprefixer() ).pipe( 
cssmin() ).pipe( gulp.dest('./dist/css') );
}

//2-2 不需要打包压缩的文件
//直接存储到指定的文件夹中

//2-2-1 图片文件
cosnt imgHandler = function(){
   return gulp.src('./src/message/*.*').pipe( gulp.dest('./dist/message') );
}

//2-2-2 后端文件
const phpHandler = function(){
   return gulp.src('./src/server/*.php').pipe( gulp.dest('./dist/server') );
}

//2-2-3 工具文件
const toolsHandler = function(){
   return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}


//3  设定监听程序
const watchHandler = function(){
   gulp.watch('./src/css/*.css' , cssHandler );
   gulp.watch('./src/js/*.js , jsHandler');
   gulp.watch('./src/pages/*.html' , htmlHandler);
   gulp.watch('./src/sass/*.scss' , sassHandler);
   gulp.watch('./src/message/*.*' , imgHandler);
   gulp.watch('./src/server/*.php' , phpHandler);
   gulp.watch('./src/tools/**' , toolsHander);
}

//4  删除规范设定
//gulp.dest() 只有生成文件的功能 没有删除文件的功能
const delHandler = funtion(){
   return del( ['./dist'] );
}

//6  gulpfile.js 文件的运行方式
//导出默认程序
//导出的默认程序中按照 顺序执行 设定的函数程序
module.exports.default = gulp.series(
    //1、先删除之前打包压缩内容
    delHandler,

    //2、在执行新的打包压缩，让压缩文件内容和当前源文件内容同步
    gulp.parallel(cssHandler , jsHandler , htmlHandler , sassHandler , imgHandler , phpHandler , toolsHandler ),

   //执行服务器规范 运行服务器
   webserverHandler,

   //对指定的文件执行监听语法
   watchHander,
)

有详细注释的代码，如下所示：

/*
    gulp.src('路径')
        是 gulp 依赖包 自带的函数程序
        按照路径 读取导入 指定文件的文件内容

        *.css   文件名是任意名称 扩展名是 css 的文件
        *.*     文件名是任意名称 扩展名是 任意名称
            只 读取文件 不会 读取 文件夹

        **      读取所有文件和文件夹的全部内容


     gulp.dest('路径')
        将 文件内容 按照指定的路径 存储 
        生成 文件名称和源文件相同的 
        执行过打包压缩之后的新的文件

    .pipe( )
        和 gulp.src() 配合使用的
        gulp.src() 读取文件内容 
        .pipe() 操作 读取的文件内容 
        一般 操作内容是 打包压缩规范 和 

    gulp.watch( 参数1 , 参数2 )
        是 gulp 依赖包 自带的函数程序 
        按照设定 对 指定的文件 执行 监听 
        当 指定文件内容改变时 执行 设定好的 打包压缩规范
            参数1   设定的监听文件路径
            参数2   监听文件内容改变时 触发执行的 打包压缩规范
                    设定的必须是 打包压缩规范的 函数名称

    gulp.series( 参数1 , 参数2 .... )
        是 gulp 依赖包 自带的函数程序
        按照 顺序 执行 设定的函数程序

    gulp.parallel()
        是 gulp 依赖包 自带的函数程序
        按照 同时 执行 设定的函数程序


    del([路径1,路径2...])
        按照 路径 删除文件 
        路径是 以 数组的形式设定 
        文件存在 删除 不存在就不会删除 

    module.exports.default = 函数程序
        使用模块化开发语法
        定义 当期 gulpfile.js 文件 导出的程序内容

        设定之后 再 调用 gulfile.js 文件 
        就可以直接使用 gulp 命令 

*/


// 1 导入加载 依赖包 

// gulp开发依赖包
const gulp = require('gulp');

// css开发依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// html开发依赖包
const htmlmin = require('gulp-htmlmin');

// sass开发依赖包
const sass = require('gulp-sass');

// 服务器开发依赖包
const webserver = require('gulp-webserver');

// 删除开发依赖包
const del = require('del');




// 2, 不同类型文件的打包压缩规范

// 2-1 需要 压缩的文件

// 2-1-1 css文件
const cssHandler = function(){
    return  gulp.src('./src/css/*.css')         // 按照指定的路径读取文件内容
            .pipe( autoprefixer() )             // 对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
            .pipe( cssmin() )                   // 将 添加前缀之后的文件内容 压缩
            .pipe( gulp.dest('./dist/css') );   // 按照指定的路径存储文件 生成的压缩文件名称 和 源文件名称相同
}

// 2-1-2 js文件
const jsHandler = function(){
    return  gulp.src('./src/js/*.js')                       //  按照路径导入js文件内容
            .pipe( babel( { presets : ['@babel/env'] } ) )  //  转化为ES5语法格式
            .pipe( uglify() )                               //  压缩转化的ES5格式的JavaScript程序
            .pipe( gulp.dest('./dist/js') );                //  存储到指定的文件夹中
}


// 2-1-3 html文件
const htmlHandler = function(){
    return  gulp.src('./src/pages/*.html')
            .pipe( htmlmin({    //  在 htmlmin() 中 以 对象的形式 设定html文件 打包压缩配置
                removeAttributeQuotes : true ,          //  删除属性中的双引号
                removeComments : true ,                 //  删除注释 

                // removeEmptyAttributes : true ,       //  删除 空属性
                // removeEmptyElements : true ,         //  删除 空标签

                removeScriptTypeAttributes : true ,     //  删除 script标签 type属性
                removeStyleLinkTypeAttributes : true ,  //  删除 link标签 style标签 type属性

                collapseBooleanAttributes : true ,      //  删除 布尔属性的属性值
                collapseWhitespace : true ,             //  删除 标签之间的空格
                
                minifyCSS : true ,                      //  压缩内部式 css语法
                minifyJS : true ,                       //  压缩内部式 js语法


            }))
            .pipe( gulp.dest( './dist/pages' ) )
}


// 2-1-4 sass文件
const sassHandler = function(){
    return  gulp.src( './src/sass/*.scss' )     //  按照指定路径读取sass文件内容
            .pipe( sass() )                     //  将读取的sass文件内容 编译成 css文件
            .pipe( autoprefixer() )             //  对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
            .pipe( cssmin() )                   //  将 添加前缀之后的文件内容 压缩
            .pipe( gulp.dest('./dist/css') )    //  将 打包压缩的文件存储到css文件夹中                
}

// 2-2 不需要打包压缩的文件
// 直接存储到指定的文件夹中

// 2-2-1 图片文件
const imgHandler = function(){
    return  gulp.src( './src/message/*.*' ) //  按照指定路径读取文件内容
            .pipe( gulp.dest( './dist/message' ) )         //  直接存储到指定的文件夹中
}


// 2-2-2 后端文件
const phpHandler = function(){
    return  gulp.src( './src/server/*.php' )        //  按照执行路径读取文件内容
            .pipe( gulp.dest( './dist/server' ) )   //  直接存储到指定文件夹中
}


// 2-2-3 工具文件
const toolsHandler = function(){
    return  gulp.src('./src/tools/**')              
            .pipe( gulp.dest( './dist/tools' ) )
}

// 3, 设定监听程序
const watchHandler = function(){
    // 设定css的监听程序 当 参数1 路径 指定的css 文件内容改变时 执行 cssHandler 压缩规范
    // 如果 有 promise程序执行 html文件中 需要导入 polyfill.js
    gulp.watch( './src/css/*.css' , cssHandler );
    gulp.watch( './src/js/*.js' , jsHandler );
    gulp.watch( './src/pages/*.html' , htmlHandler );
    gulp.watch( './src/sass/*.scss' , sassHandler );
    gulp.watch( './src/message/*.*' , imgHandler );
    gulp.watch( './src/server/*.php' , phpHandler );
    gulp.watch( './src/tools/**' , toolsHandler );


}

// 4, 删除规范设定
// gulp.dest() 只有 生成文件的功能 没有删除文件的功能
const delHandler = function(){
    return del( [ './dist' ] );
}

// 5, 服务器规范
// 当前只是简单的写一个服务器效果 
// 不是完整的服务器 不能 运行我们的项目文件
// 只是为了向大家展示 服务器的 热启动 功能
const webserverHandler = function(){
    return  gulp.src( './dist' )                //  读取压缩文件内容 
            .pipe( webserver({                  //  以对象的语法形式 配置服务器设定
                host : '127.0.0.1',             //  服务器地址
                port : '8088' ,                 //  服务器端口号
                open : './pages/index.html',    //  设定默认打开的页面路径 是从 src() 导入的路径开始的相对路径
                livereload : true ,             //  开启 服务器的热启动 导入文件内容有改变 服务器自动刷新
            }))
}



// 6, gulpfile.js 文件的运行方式 
// 导出 默认 程序 
// 导出的默认程序中 按照 顺序 执行 设定的 函数程序
// 1  delHandler 删除原始打包压缩的文件
// 2  gulp.parallel( cssHandler ) 先执行初始的打包压缩
// 3  watchHandler  执行设定的监听程序
module.exports.default = gulp.series(
    // 先 删除 之前打包压缩内容 
    delHandler ,

    // 在 执行 新的打包压缩 让压缩文件内容和当前源文件内容同步
    gulp.parallel( cssHandler , jsHandler , htmlHandler , sassHandler , imgHandler , phpHandler , toolsHandler ) ,

    // 执行 服务器规范 运行服务器
    // webserverHandler ,

    // 对 指定的文件 执行 监听语法
    watchHandler ,
)