导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

随笔分类 -  自动化构建

• ES Modules
  摘要：ES Modules浏览器环境Polyfill Polyfill支持大多数的ES Module正常加载 1、页面引入loader脚本文件 2、页面引入promise文件（浏览器未找到定义promise的情况下） 3、在使用Polyfill时，一些支持ES Module的浏览器会重复加载，所以在引用的 阅读全文
  posted @ 2021-03-15 18:54 phantom_yy 阅读(55) 评论(0) 推荐(0)
• ES Modules
  摘要：ES Modules特性 1、ESM自动采用严格模式，忽略'use strict' 2、每个ES Module 都是运行在单独的私有作用域 3、ESM是通过CORE的方式请求外部JS模块的 4、ESM的script标签会延迟执行脚本 ES Modules导入与导出 export模块内向模块外暴露接口 阅读全文
  posted @ 2021-03-15 16:56 phantom_yy 阅读(108) 评论(0) 推荐(0)
• FIS编译与压缩
  摘要：1、配置文件中添加配置 //转换sass //match第一个参数选择器 //rExt:扩展名 //optimizer：压缩 fis.match('**/*.scss',{ rExt:'.css', parse:fis.plugin('node-sass'), optimizer:fis.plugi 阅读全文
  posted @ 2021-03-11 18:15 phantom_yy 阅读(97) 评论(0) 推荐(0)
• FIS的基本使用
  摘要：FIS的核心特点：高度集成，它将前端开发常见的构建任务和调试都集中在内部，开发者可以通过简单的配置完成开发工作。 1、全局安装fis3模块 yarn global add fis3 2、构建任务 fis3 release 3、指定输出目录(output)，实现资源定位 fis3 release -d 阅读全文
  posted @ 2021-03-11 17:53 phantom_yy 阅读(179) 评论(0) 推荐(0)
• Gulp自动化构建案例---重新规划构建过程
  摘要：//clean任务 const clean = () =>{ return del(['dist','temp']) } 将style、script、page放到temp临时目录中 例如： const style = () =>{ return src('src/assets/styles/*scs 阅读全文
  posted @ 2021-03-08 19:24 phantom_yy 阅读(73) 评论(0) 推荐(0)
• Gulp自动化构建案例---文件压缩
  摘要：1、安装压缩插件 yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev 2、安装判断读取流类型的插件 yarn add gulp-if --dev 3、使用 const useref = () => { return src('dist/*.h 阅读全文
  posted @ 2021-03-08 18:49 phantom_yy 阅读(68) 评论(0) 推荐(0)
• Gulp自动化构建案例---useref文件引用处理
  摘要：1、安装useref插件 yarn add gulp-useref --dev 2、使用 const useref = () => { return src('dist/*.html',{base:'dist'}) .pipe(plugins.useref({searchPath:['dist',' 阅读全文
  posted @ 2021-03-08 18:18 phantom_yy 阅读(116) 评论(0) 推荐(0)
• Gulp自动化构建案例---监视变化以及构建优化
  摘要：1、使用watch监视开发过程中的变化 const {src,dest,parallel,series,watch} = require('gulp'); 2、在serve任务中使用 //serve任务 //notify：页面右上角browserSync的小提示，开着有时候会影响页面调试 //por 阅读全文
  posted @ 2021-03-08 17:45 phantom_yy 阅读(110) 评论(0) 推荐(0)
• Gulp自动化构建案例---开发服务器
  摘要：用于在开发阶段调试应用。 1、安装browser-sync模块，提供给我们一个开发服务器 yarn add browser-sync --dev 2、在gulp中使用这个模块 //serve任务 //notify：页面右上角browserSync的小提示，开着有时候会影响页面调试 //port：端口 阅读全文
  posted @ 2021-03-08 16:38 phantom_yy 阅读(69) 评论(0) 推荐(0)
• Gulp自动化构建案例---自动加载插件
  摘要：1、安装插件 yarn add gulp-load-plugins --dev 2、加载插件 //载入自动加载插件 const loadPlugins = require('gulp-load-plugins'); const plugins = loadPlugins(); 3、使用 将代码中的任 阅读全文
  posted @ 2021-03-05 19:59 phantom_yy 阅读(88) 评论(0) 推荐(0)
• Gulp自动化构建案例---其他文件及文件清除
  摘要：1、将public目录下的文件拷贝到dist目录下 //额外的任务 //将public目录下的文件放到dist目录下 const extra = () => { return src('public/**',{base:'public'}) .pipe(dest('dist')) } 2、将额外任务 阅读全文
  posted @ 2021-03-05 19:45 phantom_yy 阅读(169) 评论(0) 推荐(0)
• Gulp自动化构建案例---图片和字体文件转换
  摘要：1、安装插件 yarn add gulp-imagemin --dev 2、加载插件 //载入imagemin文件 const imagemin = require('gulp-imagemin'); 3、图片压缩任务 //图片转换任务 const img = () => { return src( 阅读全文
  posted @ 2021-03-05 19:27 phantom_yy 阅读(169) 评论(0) 推荐(0)
• Gulp自动化构建案例---页面模板编译
  摘要：1、安装模板引擎 yarn add gulp-swig --dev 2、载入插件 const swig = require('gulp-swig'); 3、使用 .pipe(swig(data))是.pipe(swig(data:data))的简写 const {src,dest} = requir 阅读全文
  posted @ 2021-03-05 18:56 phantom_yy 阅读(203) 评论(0) 推荐(0)
• Gulp自动化构建案例---脚本编译
  摘要：1、安装gulp 2、在根目录下新建gulpfile文件，作为gulp入口 3、安装转换流插件 yarn add gulp-babel --dev 4、安装babel的核心模块 yarn add @babel/core @babel/preset-env --dev 5、使用 const {src, 阅读全文
  posted @ 2021-03-05 17:38 phantom_yy 阅读(84) 评论(0) 推荐(0)
• Gulp自动化构建案例---样式编译
  摘要：1、安装gulp yarn add gulp 2、在根目录下新建gulpfile文件，作为gulp入口 3、安装转换插件 yarn add gulp-sass --dev//sass只转换主文件，带有下划线的文件会被认为是主文件的依赖文件，不会去转换 4、基本使用 const {src,dest} 阅读全文
  posted @ 2021-03-05 16:38 phantom_yy 阅读(82) 评论(0) 推荐(0)
• Gulp文件操作APi
  摘要：1、基本用法 //载入src和dist方法 const { src,dest } = require('gulp'); //通过src创建读取流 //pipe:导出 //dist：写入流 //读取流路径：src/*.css //写入流路径：dist exports.default = () => { 阅读全文
  posted @ 2021-03-05 14:00 phantom_yy 阅读(162) 评论(0) 推荐(0)
• Gulp构建过程核心工作原理
  摘要：构建过程：读取文件，将文件转换，再写入到另外一个位置 三个核心概念：读取流（输入） 转换流（加工） 写入流（输出） const fs = require('fs'); const { Transform } = require('stream'); exports.default = () =>{ 阅读全文
  posted @ 2021-03-04 15:14 phantom_yy 阅读(119) 评论(0) 推荐(0)
• Gulp的异步任务
  摘要：异步任务的三种方式 通常情况下我们没有办法明确知道这个调用是否完成的，都是通过在函数内部通过回调或者是事件的方式去通知外部，这个函数调用已经完成。 在gulp的异步中也会存在这个问题。 1、使用回调函数 exports.callback = done => { console.log('callba 阅读全文
  posted @ 2021-03-04 14:02 phantom_yy 阅读(198) 评论(0) 推荐(0)
• grunt标记任务失败
  摘要：（1）同步标记任务失败 //标记失败任务 module.exports = grunt => { grunt.registerTask('bad',()=>{ console.log('bad working~'); return false; }); grunt.registerTask('foo 阅读全文
  posted @ 2021-03-03 18:11 phantom_yy 阅读(201) 评论(0) 推荐(0)
• grunt的基本使用
  摘要：（1）创建一个 package.json yarn init --yes // --yes 跳过会话，直接通过默认值生成 package.json // yarn init --yes # 简写 -y （2）添加Grunt模块 yarn add grunt （3）添加gruntfile文件 code 阅读全文
  posted @ 2021-03-03 18:09 phantom_yy 阅读(254) 评论(0) 推荐(0)