sass的gulp封装步骤

一.sass的gulp封装

1,准备工作
    先要定义项目文件夹结构

2,npm 格式化
    npm init -y

3,下载 相关的依赖包
    下载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

            

4,定义 gulpfile.js 文件以及gulp的封装程序
    (1),导入第三方依赖包
        const sass = require('gulp-sass');

    (2),定义将sass转化为css
        与压缩css不同的只是多了一步,将sass编辑为css

        const sassHandler = function(){
            return gulp.src('./src/sass/*.*')
            .pipe( sass() )                    // 将sass 转化为 css文件
            .pipe( autoprefixer() )            // 自动添加css前缀
            .pipe( cssmin() )                  // 将css程序压缩
            .pipe( gulp.dest('./dist/css') )   // 将打包压缩好的程序,移动到指定的文件夹
        }

二.gulp的总结

1,建立文件夹目录
    src   源文件
    dist  压缩文件

        src中
            pages     HTML文件
            sass      sass文件
            js        未压缩的js文件
            images    图片
            radio     音频
            video     视频
            lib       压缩好的js文件

2,格式化npm
    npm init -y

3,安装相应的依赖包
    gulp: 全局gulp  项目gulp  两个都要有,缺一不可
        全局gulp  
            npm i -g gulp

        项目gulp  
            npm i gulp  或者   npm i -D gulp  

    各种压缩规范需要的 第三方依赖包

        sass的
            npm i gulp-sass            sass编译为css的依赖包
        还必须有全局的 sass
            npm i -g sass

            安装gulp-sass有可能出问题
                先试试: set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
                        给 taobao 添加新的下载 gulp-sass的路径
                
                不行: 先安装 node-sass 在按照gulp-sass

                        npm i -g node-sass

                        npm i gulp-sass

        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                  删除依赖包


4,定义压缩规范
    sass --- 压缩
    js   --- 压缩
    html --- 压缩

    音频,视频,图片,字体样式,已经压缩的js文件,直接移动,不要压缩

    watch 监听规范

    del规范

    webserver规范

    默认default规范
        先删除
        再执行所有的打包压缩和移动
        开启服务器
        执行监听

gulpfile.js


index.html

在cmd中执行的内容