node.js中gulp简介与使用

短命女 2023-03-13 12:29 20阅读 0赞

## 1,node.js简介 ##

本质是一种运行执行js程序代码的方式方法/环境
        之前,我们只能在浏览器环境中运行js程序
        现在我们可以在node环境汇总,运行js程序
        node.js环境 是 基于 Chrome V8 引擎的环境,也就是以谷歌浏览器内核为环境,来运行js程序
        			引擎对js程序的作用就像汽油对汽车的作用，就是给动力，在这里指通过引擎运行js程序
    
        js程序,在不同的环境下,有不同的功能
            在浏览器环境下,受到浏览器的限制
                能操作 ECMAScript  DOM  BOM
                不能操作 I/O 数据库等
    
            在node.js环境下
                可以操作 ECMAScript I/O 数据库等，就是指可以操作硬盘文件，编译输出时命令行是node demo.js
                														就像python demo.py其他语言编译运行一样
                不能操作 DOM   BOM
                
    	运行方式很简单，依靠终端 node demo.js

## node.js第三方依赖包的安装 ##

(1) , 使用 npm 来进行安装
              npm 是 node.js 默认给我们安装好的工具,我们可以直接使用
    
        (2) , 设定 npm 的下载路径(镜像源/镜像文件)，就是把下载地址从国外变为国内下载
           
            直接设定 推荐的方法
    
                npm config set registry https://registry.npm.taobao.org 直接设定为淘宝下载
    
        (3) , 清除 npm 的下载缓存
            如果上一次下载失败,会在node.js中有上一次下载的缓存文件
            如果要执行新的下载,node.js默认会从上一次下载的程序中,继续下载
            就容易造成下载失败
    
            如果出现下载失败的情况,一定要执行清除操作之后,再来进行第二次下载
    
            一般推荐使用软清除就可以了
            如果软清除有问题,再使用硬清除
            千万注意,硬清除之后,要再执行一次软清除
    
            清除 npm 的缓存有两种方法
    
            (1) , 通过 命令 来清除缓存  --- 软清除
                npm cache clear -f
                清除缓存文件
    
            (2) , 直接清除缓存文件 --- 硬清除
        
                C:\Users\你的用户名\AppData\Roaming\npm-cache
                这个 npm-cache 文件夹中存储的就是 缓存文件
    
                直接删除这个文件夹,然后再次执行 软清除
                npm cache clear -f
    
                注意: AppData 是一个隐藏文件 , 必须要显示隐藏文件,才可以看到
    
    
        (4) , 依赖包的安装,分为两种形式
            (1), 全局安装 
                npm i -g 依赖包 --global 可以简写成 -g
                npm install --global 依赖包
    
                全局安装的依赖包,在任意路径下,都可以调用使用
    
            (2), 项目/局部 安装
                npm i 依赖包 install 简写 i 
                npm install 依赖包
    
                项目/局部安装的依赖包,只能在安装路径下,执行调用
    
                还有一种安装语法，比较不常用
                nmp i -D 依赖包
    
                两种语法,在使用上没有任何区别
                只是安装依赖包信息,在 package.json 中的存储位置不同
                npm i 依赖包    ---- 存储在  dependencies 中
                nmp i -D 依赖包 ---- 存储在  devDependencies 中
    
            有些 依赖包 必须要 安装全局的同时,也安装项目依赖包

## gulp安装与使用 ##

**gulp是在node.js中需要下载的依赖包，它主要用于压缩打包程序，在浏览器上运行的都是压缩后的文件，这样可以提高浏览器的加载速度，这种方法常用于打包项目**

**操作步骤如下：**

1,建立文件夹目录
            src   源文件
            dist  压缩文件
    
                src中
                    pages     HTML文件
                    sass      sass文件
                    js        未压缩的js文件
                    images    图片
                    radio     音频
                    video     视频
                    lib       压缩好的js文件
    
       2,格式化依赖包信息
            npm init -y    格式化成功后会出现 package.json 文件，看下面的特别说明有解释
               
       3,安装相应的依赖包
            gulp 的全局依赖包
                npm i -g gulp
    
            gulp 的项目依赖包
                npm i gulp
    		
    		以上两个依赖包全局，局部都要安装，否则会出错，无法进行压缩打包
    		
       4，下载相应的打包压缩规范依赖包
       
           css的
                    npm i gulp-cssmin          压缩依赖包
                    npm i gulp-autoprefixer    自动添加前缀依赖包
    
                js的
                    npm i gulp-uglify          打包压缩ES5语法规范依赖包
                    npm i gulp-babel           将其他ES语法规范转化为ES5语法规范
                    npm i @babel/core          这是两个和 gulp-babel 配合使用的依赖包
                    npm i @babel/preset-env    说白了就是 gulp-babel 的两个补丁文件,是让 gulp-babel 能更正确的执行
    
                    下载4个依赖包 只要 加载 两个依赖包 
    
                html的
                    npm i gulp-htmlmin         html压缩依赖包
                    
                webserver的
                    npm i gulp-webserver       webserver依赖包
    
                del的
                    npm i del                  删除依赖包

**下载好依赖包后要创建 gulpfile.js 文件, 文件名称,必须是这个名称,一个字母都不能错,大小写也不能错  
gulp运行时,只执行 gulpfile.js 文件 , 必须必须必须是这个名称**

在 gulpfile.js 文件中来定义 你要执行的 程序内容，首先就是先引入依赖包模块

// 首先引入第三方模块，gulp模块
    const gulp = require('gulp');
    
    // 导入css文件压缩相关依赖包
    const cssmin = require('gulp-cssmin');
    
    // 添加兼容前缀依赖包
    const autoprefixer = require('gulp-autoprefixer');
    
    // 定义的内容,是固定语法形式 有这个定义,自动添加兼容前缀依赖包才会起作用
    // 需要加入到package.json中才会起作用
    // "browserslist": [
    // "last 2 versions", // 兼容 浏览器 最新的2个版本, 没有特别设定的浏览器, 就兼容最新的两个版本
    // "IOS > 7", //IOS 系统 兼容 7版本以上 
    // "FireFox > 20" //火狐 浏览器 兼容 20版本以上
    // ]
    
    // 加载js压缩相关依赖包
    // 打包压缩ES5规范的依赖包
    const uglify = require('gulp-uglify');
    
    // 将其他ES语法转换为ES5语法规范依赖包，还有两个补丁文件，需要下载但不需要加载
    // 因为加载下面的这个那两个补丁文件就自动加载到gulp-babel里面了
    const babel = require('gulp-babel');
    
    // 加载html打包规范依赖包
    const htmlmin = require('gulp-htmlmin');
    
    // 加载内置服务器依赖包
    const webserver = require('gulp-webserver');
    
    // 加载sass依赖包
    const sass = require('gulp-sass');
    
    // 加载删除的依赖包
    const del = require('del');
    
    // 定义sass的打包规范
    const sassHandle = function () { 
    
        return gulp.src('./src/sass/*.scss')
            .pipe(sass())
            .pipe(autoprefixer())
            .pipe(cssmin())
            .pipe(gulp.dest('./dist/css'));
    }
    
    // 定义css压缩规范，利用函数封装，以返回值的形式定义程序内容
    const cssHandle = function () { 
    
        return gulp.src('./src/css/*.css')         // 告诉gulp要压缩的css文件路径
            .pipe(autoprefixer())              // 添加前缀
            .pipe(cssmin())                    // 打包压缩
            .pipe(gulp.dest('./dist/css'))     // 将压缩的文件移到指定文件夹中保存
    
    }
    
    // 定义js压缩规范，利用函数封装，以返回值的形式定义程序内容
    const jsHandle = function () { 
    
    
        return gulp.src('./src/js/*.js')         // 告诉gulp要压缩的css文件路径
            .pipe(babel({  presets: ['@babel/env'] }))    // 将其他语法规范,转化为ES5语法规范, babel() 中的参数是固定的语法格式
            .pipe(uglify())                     // 打包压缩js文件
            .pipe(gulp.dest('./dist/js'))     // 将压缩的文件移到指定文件夹中保存，就是写入到文件中，有就是添加内容，没有这个文件就是新建
    
    }
    
    // 定义html压缩规范
    const htmlHandle = function () { 
    
        return gulp.src('./src/pages/*.html')
            .pipe(htmlmin({ 
    
                removeAttributeQuotes: true,       // 打包时删除属性值上的双引号
                removeComments: true,              //  删除程序中的注释内容
                collapseBooleanAttributes: true,   //  删除布尔属性中定义的属性值
                collapseWhitespace: true,          //  删除程序中多余的空格,只删除标签之前的空格,标签内部和内容的空格不会删除
                minifyCSS: true,                   //  压缩HTML标签中的css程序代码
                minifyJS: true,                    //  压缩html标签中的js代码
    
            }))
            .pipe(gulp.dest('./dist/pages'))     // 打包好的文件移到指定文件夹保存
    }
    
    // 定义服务器执行规范
    const webserverHandle = function () { 
    
        return gulp.src('./dist')    // 指定的路径是压缩文件的路径,也就是在服务器上运行的都是压缩文件,提高页面中程序的执行效率
            .pipe(webserver({ 
                host: '127.0.0.1',            // 定义的域名地址,目前使用本地域名地址127.0.0.1
                port: 8000,                   // 定义端口号
                open: './pages/index.html',   // 默认打开执行的网页,也就是 输入 127.0.0.1:8080 直接打开的网页
                livereload: true,             // 热启动 当文件内容,代码,css,js等发生改变时,会自动重新加载页面,执行效果,不用手动刷新                                       
            }))
    }
    
    // 音频,视频,图片等,不打压缩,直接移动到指定的文件夹位置
    // 将所有格式的图片,都移动到指定的文件夹位置中
    // 添加到 watch 监听中 和 default 默认执行中
    const imgHandle = function () { 
    
        return gulp.src('./src/images/*.*')        // 指定要移动的图片的文件夹位置
            .pipe(gulp.dest('./dist/images'))   // 指定移动到的文件夹位置
    }
    
    
    // 定义删除规范
    const delHandle = function () { 
    
        return del(['./dist']);
    
    }
    
    // 定义监听规范
    const watchHandle = function () { 
    
        // 如果监听的文件发生改变就立马重新执行压缩规范
        gulp.watch('./src/css/*.css', cssHandle);
        gulp.watch('./src/js/*.js', jsHandle);
        gulp.watch('./src/pages/*.html', htmlHandle);
        gulp.watch('./src/sass/*.scss', sassHandle);
        gulp.watch('./src/images/*.*', imgHandle);        // 监听 图片 文件 
    
    }
    
    // 定义gulp文件的默认执行程序以及程序的执行顺序
    // 定义默认执行的程序,定义之后,不用写 node gulpfile.js 执行程序
    // 直接执行 gulp 就可以了,会默认的执行定义的程序内容
    
    // 默认按照顺序,执行()中的程序
    // 先执行 删除规范,删除的是之前,压缩的文件
    // 在执行 同时执行 所有的压缩规范
    module.exports.default = gulp.series(  // 按照顺序执行
    
        delHandle,                    // 第一步,先执行删除规范
        gulp.parallel(cssHandle, jsHandle, htmlHandle, imgHandle, sassHandle), // 第二步,同时执行所有的压缩规范,css,html,js等等....
        webserverHandle,  // 设置服务器，会自动打开设定的默认页面
        watchHandle,                  // 第三步,执行的是监听规范,随时监听源文件的改变
    
    );

**特别说明:**

gulpfile.js        我们程序员自动手动定义的文件
                          gulp执行打包压缩时,会只执行 这个文件名中的打包压缩程序
    
       package.json       执行 npm init -y 自动生成的文件
                          其中会存储 下载使用 依赖包的相关信息
                          是一个非常重要的文件
    
       package-lock.json  执行 npm 下载安装依赖包之后 自动生成的文件
                             没啥大用,但是也要留着,别删除,之后会用

## 编译 sass 文件 ##

1,单一文件的编译
                    sass 你要编译的文件 编译之后的文件名称    例如：sass demo.scss demo1.css
    
                    可以定义编译生成的文件的名称
                    但是,源scss文件,每次修改之后,都要再次执行编译才会生成新的内容的css文件
    
                2,单一文件的时时编译
                    sass --watch 你要编译的sass文件:生成的文件   sass --watch demo.scss:demo1.css 都是文件
                    监听形式,如果源scss文件发生改变,自动生成新的编译的css文件
                    但是,这种语法,只能监听一个scss文件
    
                3,时时监听一个文件夹,多文件的时时编译
                    sass --watch 你要编译的sass文件夹:生成的文件夹
                    不能定义文件名称的,生成与源文件,文件名相同,文件类型不同的css文件
                    
            说明:
                map文件的作用  
                    map 称为映射 
                    map 文件是映射生成的代码的位置,表示原文件中代码的所在的行数
    
                    实际项目中,后代代码调试,有可能造成sass文件代码与对应的css代码的行数不同
    
                    map映射文件,是为了在控制台中,显示css样式是在 sass 文件中的源码位置
    
                所谓的映射:
                    映射概念是 计算机编程中,常见的一个名词
    
                    我们之前也接触过,类似映射的概念
    
                    数组a 是 [1,2,3,4,5]  
                    
                    将数组a中所有的数据,数值乘以2,形成一个新的数组b
    
                    数值b 是 [2,4,6,8,10] 
    
                    数组b,就是数组a的映射
    
                    通俗得讲,所谓的映射,就是将 A 通过 一定的规范 转化生成 B
                    那么 B 就是 A 的映射

### sass在gulp中的使用方法 ###

首先下载 相关的依赖包
            下载sass依赖包,将 sass 语法编译为 css语法
            依赖包要下载为项目形式,也就是sass与gulp一样,要有全局和项目的两个依赖包
    
            全局的 sass        平时编译使用的
            npm i -g sass
    
            项目的 gulp-sass   打包压缩使用的
            npm i gulp-sass   常用这种方法，如果出错可以使用下面这种方法
    
            下载gulp-sass时,有可能出现问题
    
                1,使用的是 taobao 地址,但是因为现在 taobao 地址下载 gulp-sass会有问题,需要新增地址
                  需要新增 gulp-sass专用下载地址
    
                  set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
                
                  如果 taobao 不能下载 gulp-sass 直接执行这个命令
                  在 taobao 地址中,新增一个 gulp-sass 专用的下载地址
                  
                2,如果还是报错,不行,就需要做另外的操作了
                  (1) 下载一个 node-sass 全局作用域
                    npm i -g node-sass
    
                  (2) 再下载安装 gulp-sass 项目作用域的
                    npm i gulp-sass

**sass在gulp中的代码在上面，有需要可以参考**