node.js中gulp简介与使用

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中的代码在上面，有需要可以参考