在拉钩学习的笔记（二十三）gulp自动化构建工具

1、自动化构建工具 Gulp
    Grount  Gulp  FIS
    Gulp 与 npm script： 都能够实现自动化构建； 但 Gulp 语法简单， Gulp 语法就是 Javascript 语法，npm script 语法接近 shell 脚本； Gulp 生态完善，构建效率高
    步骤： 1、全局安装 gulp 客户端（npm install -g gulp-cli）
    2、初始化项目（npm init --yes）
    3、安装 gulp 包（npm install gulp -D）
    4、新建 gulpfile 文件（gulpfile.js）
    5、在 gulpfile.js 中，创建 gulp 任务
    6、执行 gulp 任务（gulp <task-name>
2、Gulp 组合任务
    并行 gulp.paralle(task1, task2, task3)
    串行 gulp.series(task1, task2, task3)
3、Gulp 文件操作
    缓冲方式： 源文件==>内存缓冲==>目标文件
    流方式： 将文件分为小块，一块一块的操作
    Gulp是基于 流 的构建系统： 读取流（输入） ==> 转换流（加工） ==> 写入流（输出）
    src()  ==> pipe()（管道流方法可以有多个操作） ==> dest()
    src() 输入的内容    第二个参数{base:"src"} base参考目录是src
    pipe() 管道 可以使用多次
    dest() 目标
4、Gulp 构建样式文件
    gulp-less       将 less 转 css
    gulp-clean-css  压缩css
    gulp-rename     重命名  参数 {extname:""} 重命后缀名
    autoprefixer
        CSS hack 与 Autoprefixer ：保证 CSS 兼容性
        CSS hack： CSS代码存在兼容性的问题，同一段CSS代码在不同浏览器上的呈现效果不同； 针对不同浏览器写响应的 CSS 代码，这个过程叫做CSS hack
        CSS hack 的目的就是使CSS代码兼容不同的浏览器
        属性前缀法 ：
            user-select 属性可以控制用户能否选中文本（存在兼容问题）；给CSS属性添加浏览器特有的前缀：IE -ms-； Chrome  -webkit- ； Safari -webkit- ； Firefox -moz- ； Opera -o-
        Autoprefixer使用caniuse.com的数据来决定哪些属性需要加前缀
5、Gulp 构建脚本文件
    所需的插件：gulp-babel  ES6+新语法转成ES5； 
    gulp-uglify 压缩js代码； 
    gulp-rename 对文件进行重命名    参数 {extname:""} 重命后缀名
6、Gulp 构建页面（HTML）文件
    gulp-htmlmin    压缩HTML文件
    参数collapseWhitespace: true  空白折叠 
        minifyCSS   true  压缩css
        minifyJS    true  压缩js
7、Gulp 构建资源（图片）文件
    gulp-imagemin   压缩图片文件
    安装依赖报错解决方案
    报错：gulp-imagemin: Coulden't load default plugin "gifsicle"
            gulp-imagemin: Coulden't load default plugin "optipng"
    解决：配置hosts：通过vscode打开hosts文件（C:\Windows\System32\drivers\etc）；添加Github hosts 内容；保存（如无权限，以管理员身份新打开文件）
        然后重新安装 gulp-imagemin
8、Gulp 文件清除
    del     删除文件和目录
    // 清除文件、文件夹 任务
    const clean = () => {
        // 指定删除文件或目录
        return del(['dest']);
    }
9、开发服务器构建插件
    browser-sync        发布 web 服务
    npm i browser-sync -D
    引入：const browsersync = require("browser-sync");
         const bs = browsersync.create();
    声明 服务发布 任务
        const serve = () => {
            // watch(被监视的文件, 对应的任务)  gulp.watch
            watch('src/index.html', html);
            // 初始化服务
            bs.init({
                // 禁用浏览器右上角的 browserSync connected 提示框
                notify: false,  
                server: {
                    // 指定服务启动的目录
                    baseDir: './dist'
                }
            });
        }
    官网：https://browsersync.io/
    文档：http://www.browsersync.cn/docs/
    安装Bootstrap   bootstrap 提供常用的页面效果；jquery bootstrap 的依赖包
10、Gulp 开发服务器中监视文件变化

Gulp 在 Yeoman 中的应用：以 webapp 生成器为例