自动化构建笔记

siyiyan
268 阅读6分钟
1、自动化构建简介
  • 源代码-自动化构建-生产代码
  • 自动化构建工作流：脱离运行环境兼容带来的问题，使用提高效率的语法、规范和标准
    • ECMAScript Next //提高编码效率和质量
    • Sass //增强css的可编程性
    • 模板引擎 //抽象页面重复的HTML
    这些用法大都不被浏览器直接支持，自动化构建工具：构建转换那些不被支持的【特性】
2、自动化构建初体验

​ 根目录创建

  • scss/main.scss

  • $body-bg: #f8f9fb;

  • $body-color: #333;

      body{
      margin: 0 auto;
      padding: 20px;
      max-width: 800px;
      background-color: $body-bg;
      color: $body-color;
  }

  • yarn add sass --dev //创建

  • .\node_modules.bin\sass //打印一些帮助信息

  • .\node_modules.bin\sass scss/main.scss css/style.css //把sass文件转换成css了

  • NPM Script 解决复杂的命令，定义相关的命令，包装构建命令

  • yarn build //yarn 可以省略run 提示：yarn run v1.22.4 warning package.json: No license field $ sass scss/main.scss css/style.css 系统找不到指定的路径。 error Command failed with exit code 1. info Visit yarnpkg.com/en/docs/cli… for documentation about this co mmand.

  • yarn add browser-sync --dev //启动测试服务器

  • yarn serve //会唤起浏览器打开网页 提示：yarn run v1.22.4 warning package.json: No license field $ browser-sync . 系统找不到指定的路径。 error Command failed with exit code 1. info Visit yarnpkg.com/en/docs/cli… for documentation about this command.

  • // "preserve": "yarn build",

  • yarn add npm-run-all --dev

  • yarn start

    存在问题： yarn找不到路径 www.cnblogs.com/lhuser/p/11… blog.csdn.net/qq_40544291…

3、常用的自动化构建工具
  • Grunt //内存，构建慢
  • Gulp //最流行
  • FIS //初学者
4、Grunt的基本使用

  • yarn init --yes

  • yarn add grunt

  • code gruntfile.js //根目录下创建文件 //Grunt 的入口文件 //用于定义一些需要 Grunt 自动执行的任务 //需要导出一个函数 //此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的 API

    module.exports = grunt => { grunt.registerTask('foo', () => { //指定一个任务函数 console.log('hellow grunt~') }) //去注册一个方法

      grunt.registerTask('foo', '任务描述', () => {   
      console.log('other task~')
  })  
  
  <!-- grunt.registerTask('default', () => {   
      console.log('default task~')
  })   -->

  grunt.registerTask('default', ['foo', 'bar'])  //串联执行

 //默认同步模式
  <!-- grunt.registerTask('async-task', () => {   
      setTimeout(() => {
          console.log('async task workding~')
      },1000)          
  })  -->
  grunt.registerTask('async-task', function(){
      const done = this.async()
      setTimeout(() => {
          console.log('async task workding~')
          done()  //标识下已完成，执行异步
      },1000) 
      
  })

    }

  • yarn grunt foo

  • yarn grunt --help

  • yarn grunt bar

  • yarn grunt

  • yarn grunt async-task

5、Grunt标记任务失败
return false     //会影响其他代码
1、- yarn grunt default --force    //强制执行所有
2、 异步： 给个实参
    上面代码done(false)
6、Grunt的配置方法
module.exports = grunt => {
    grunt.initConfig({
        foo: 'bar'
    })

    grunt.registerTask('foo', () => {   
        console.log(grunt.config('foo'))    //打印了bar
    }) 
}

  • yarn grunt foo

    module.exports = grunt => { grunt.initConfig({ foo: { bar: 123 } })

      grunt.registerTask('foo', () => {   
      console.log(grunt.config('foo.bar'))    //打印了bar的属性值
  })

    }

  • yarn grunt foo

7、Grunt多目标任务
module.exports = grunt => {
    grunt.initConfig({
        build: {    //会同时执行这两个目标
            options: {  //作为任务的配置选项出现
                foo: 'bar'
            } 
            css: {
                options: {  //会覆盖上面的foo：bar
                    foo: 'baz'
                }
            },
            js: '2'
        }
    })

    //多目标模式，可以让任务根据配置形成多个任务
    grunt.registerMultiTask('build', () => {   
        console.log('build task')    //打印了bar的属性值
        console.log(this.options())
        console.log('target: ${this.target}, data: ${this.data}')
    }) 
}

  • yarn grunt build

  • yarn grunt build:css //会执行对应的目标

8、Grunt插件的使用

  • yarn add grunt-contrib-clean module.exports = grunt => { grunt.initConfig({ clean: { //temp: 'temp/app.js' temp: 'temp/#.txt' //删除所有带txt的文件 temp: 'temp/**' //删除所有子目录及子目录下的文件 } }) grunt.loadNpmTasks('grunt-contrib-clean') //把一些任务加载进来

    }

  • yarn grunt clean

9、Grunt常用插件及总结

  • yarn add grunt-sass sass --dev

    const sass = require('sass') const loadGruntTasks = require('load-grunt-tasks') module.exports = grunt => { grunt.initConfig({ sass: { options: { sourceMap: true, implementation: sass } main: { //指定输入文件和输出文件的路径 files: { 'dist/css/main.css': 'src/sass/main.sass' } } }, babel: { options: { sourceMap: true, presets: ['@babel/preset-env'] } main: { files: { 'dist/js/app.js': 'src/js/app.js' } } }, watch: { js: { files: ['src/js/.js'], //监听 tasks: ['babel'] //执行任务 }, css: { files: ['src/sass/.sass'],
    tasks: ['sass'] } } }) //grunt.loadNpmTasks('grunt-sass') //把一些任务加载进来 loadGruntTasks(grunt) //自动加载所有的 grunt 插件中的任务

      grunt.registerTask('default', ['sass', 'babel', 'watch'])       //映射

    }

  • yarn grunt sass

es6用grunt-babel

  • yarn add grunt-babel @babel/core @babel/preset-env --dev

减少loadNpmTasks的使用

  • yarn add load-grunt-tasks --dev

  • yarn grunt babel

  • yarn add grunt-contrib-watch --dev

  • yarn grunt watch

  • yarn grunt

10、Gulp的基本使用

  • yarn init --yes

  • yarn add gulp --dev

  • code gulpfile.js

    //gulp 的入口文件

    exports.foo = done => { console.log('foo task working~')

      done()  //标识任务完成

    }

  • yarn gulb foo

    exports.default = done => { console.log('foo task working~')

      done()  //标识任务完成

    }

  • yarn gulb

    //不被推荐了 const gulp = require('gulp')

    gulp.task('bar', done => { console.log('bar working~') done() //标识任务完成 })

  • yarn gulb bar

11、Gulp的组合任务
const { series, parallel } = require('gulp')

const task1 = done => {
setTimeout(() => {
    console.log('task1 working~')
    done()
}, 1000)
}

const task2 = done => {
setTimeout(() => {
    console.log('task2 working~')
    done()
}, 1000)  
}

const task3 = done => {
setTimeout(() => {
    console.log('task3 working~')
    done()
}, 1000)  
}
// 让多个任务按照顺序依次执行
exports.foo = series(task1, task2, task3)

// 让多个任务同时执行
exports.bar = parallel(task1, task2, task3)
12、Gulp的异步任务

  • yarn gulp callback

  • yarn gulp promise

  • yarn gulp async

  • yarn gulp stream

13、Gulp构建过程核心工作原理

​ 文件读取流 fs.createReadStream('normalize.css') ​ 文件写入流 fs.createWriteStream('normalize.min.css') ​ 读出的文件流导入写入文件流 read.pipe(write)

文件转换流
// 核心转换过程
transform: (chunk, encoding, callback) => {
  const input = chunk.toString()
  const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
  callback(null, output)    //第一个错误对象
}

读取流 -》 转换流 -》 写入流
14、gulp文件操作API

// yarn gulp

// yarn add gulp-clean-css --dev

// yarn add gulp-rename --dev

15、gulp 案例-样式编译
https://github.com/zce/zce-gulp-demo

命令行： git clone https://github.com/zce/zce-gulp-demo

vscode打开这个目录： code zce-gulp-demo\

选中src根目录： - yarn add gulp --dev

根目录  新建guilfile.js文件

// yarn gulp style
// yarn add gulp-sass --dev
16、gulp 案例-脚本编译
yarn add gulp-babel --dev

yarn gulp script

yarn add @babel/core @babel/preset-env --dev
17、gulp 案例-页面模版编译
yarn add gulp-swig --dev

yarn gulp page

yarn gulp compile
18 、gulp 案例-图片和字体文件转换
yarn add gulp-imagemin --dev

yarn gulp image

yarn gulp font
19、gulp 案例-其他文件及文件清除
yarm gulp build 

yarn add del --dev
20、gulp 案例-自动加载插件
yarn add gulp-load-plugins --dev
21、gulp 案例-开发服务器
yarn add browser-sync --dev

yarn gulp serve
22、gulp 案例-监视变化以及构建优化
yarn gulp serve

yarn gulp clean

yarn gulp develop
23、gulp 案例-useref文件引用处理
yarn gulp build

yarn add gulp-useref --dev

yarn gulp useref
24、Gulp案例-文件压缩

​ yarn add gulp-htmlmin gulp-uhlify gulp-clean-css --dev

yarn add gulp-if --dev

yarn gulp useref

yarn gulp compile   //先执行

yarn gulp useref
25、Gulp案例-重新规划构建过程
生成的先放到临时文件中，再放到dist文件中

yarn gulp build

yarn gulp develop
26、Gulp案例-补充
Ctrl k Ctrl E

package.json 的 script 有3个，clean、build、develop

yarn clean

.gitignore 文件下忽略 dist   temp
27、封装工作流-准备

​ Gulpfile + Gulp = 构建工作流 ​ + ​ Gulp CLI = zce-pages

首先创建仓库
 
cd ..
 
yarn global add zce-cli

zce init nm zce-pages

cd zce-pages

git init
 
git remote add origin https://github.com/zce/zce-pages.git

git status

git add .

git commit -m "feat: initial commit"

git push -u origin master

code .      //打开目录
28、封装工作流-提取gulpfile

​ code . -a

yarn

yarn link

yarn link "zce-pages"

yarn

yarn build

yarn add gulp --dev
29、封装工作流-解决模块中的问题
yarn build
29、封装工作流-抽象历经配置
yarn develop

#####30、封装工作流-包装gulp cli

yarn gulp

yarn gulp --gulpfile ./node_modules/zce-pages/lib/index.js

yarn gulp build  --gulpfile ./node_modules/zce-pages/lib/index.js

yarn gulp --gulpfile ./node_modules/zce-pages/lib/index.js --cwd .

#!/user/bin/env node

cd ..

cd zce-pages

yarn link

yarn unlink

yarn link

zce-pages

zce-pages -sdfs sdfs

cd ..

cd zce-gulp-demo

zce-pages build

zce-pages clean
30、封装工作流-发布并使用模块
cd ../

cd zce-pages

git add .

git commit -m "feat: update package"

git push

yarn publish

yarn publish --registry https://registry.yarmpkg.com

cd ..

mkdir zce-pages-demo 

cd zce-gulp-demo

cd ../

cd zce-pages-demo

code .

​
yarn init --yes

yarn add zce-pages --dev

    npm.taobao.org

    zce-pages      点击     sync

yarn zce-pages build

参考模块：github.com/zce/x-pages

31、fis的基本使用
yarn global add fis3 

code XX

fis3 release

fis3 release -d output
32、fis编译和压缩
yarn global add fis-parser-node-sass

fis3 release -d output

yarn global add fis-parser-babel-6.x

fis3 release -d output

fis3 inspect

​

​

avatar
文章
阅读
粉丝