前端工具
我的小英短
Q版前端开发攻城狮
展开
-
Node.js库puppeteer接口及常用API总结
导读这篇文章,主要用于收集整理常用的Puppeteer的一些常用API操作,自动化操作,爬虫测试,基础使用等等。当然至于是什么是Puppeteer呢,我们来看下官方介绍:Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面...原创 2019-11-15 14:55:13 · 3046 阅读 · 0 评论 -
手把手带你深入了解 webpack config devSever 常用参数配置
导读DevServer 提供了一些配置项可以改变 DevServer 的默认行为。 要配置 DevServer ,除了在配置文件里通过 devServer 传入参数外,还可以通过命令行参数传入。 注意只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 DevServer 提供的,Webpack 本身并不认识 devSe...原创 2019-07-29 17:47:23 · 2101 阅读 · 0 评论 -
编写一款自定义修改html文件中的img、script、link hash后缀的简单gulp插件
编写一款自定义修改html文件中的img、script、html hash后缀的简单插件我们这篇文章将根据我们自己的一些项目需求,来编写一个本地gulp插件,来满足我们的构建开发需求,主要需求就是在编译html的同时,对html文件中的静态资源引用添加随机hash后缀。插件代码实现index.jsvar through = require("through2")// 正则替换func...原创 2019-06-30 11:44:39 · 1021 阅读 · 0 评论 -
使用webpack打包编译TypeScript包括静态资源引入声明配置
使用webpack打包编译TypeScript导读TypeScript 是 JavaScript 的超集,为其增加了类型声明验证,可以编译为 JavaScript 代码。这篇博文里我们将会学习如何集成 webpack 跟 TypeScript。项目地址:https://github.com/RiversCoder/webpack-test安装ts开发依赖cnpm install --D...原创 2019-07-05 10:55:00 · 5201 阅读 · 0 评论 -
前端知识每日小拷问 005 资源、bug管理相关
前端知识小拷问005 资源、bug管理相关准备接收大前端形法的考验吧!?每日5题,直击你的内心 ~~今天的前端知识点有如下:如果不想让别人盗用你的图片,访问你的服务器资源该怎么处理?面对精灵图和base64如何选择?webpack怎么引入第三方的库?git如何管理线上的bug?nginx有哪些好用的功能?仓库地址:https://github.com/RiversCoder/...原创 2019-07-14 13:50:23 · 915 阅读 · 0 评论 -
使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境
使用gulp+browserify+browserify+babelify-css+babelify构建轻量级react开发环境导读在react项目开发脚手架选型中,一般大多数情况都会选择create-react-app这款流行的脚手架工具,但是针对一些比较小的项目,个人建议还是动手搭建建一个小型且轻量的构建工具自用比较合适,下面我们使用gulp,配合browserify,搭建react...原创 2019-07-03 16:13:43 · 1716 阅读 · 0 评论 -
webpack 创建个人的第三方依赖library
webpack 创建个人的第三方依赖 library导读除了打包应用程序代码,webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- package...原创 2019-06-27 16:16:56 · 1544 阅读 · 0 评论 -
webpack 引用打包第三方全局依赖3种方式
webpack 引用打包第三方全局依赖导读webpack 可以识别 ES6 模块语法、CommonJS 或 AMD 规范编写的模块。然而,一些第三方的库(library)可能会引用一些全局依赖(例如 jQuery 中的 $)项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- pa...原创 2019-07-02 21:04:15 · 8338 阅读 · 0 评论 -
使用React+exprss+Mockjs开发自适应伸缩响应列表分页组件
使用React+Mockjs开发自适应伸缩列表分页组件项目预览项目技术栈create-react-app脚手架express 后台服务,跨域设置,模拟数据库limit操作mockjs根据指定数据结构生成随机数据项目目录src目录| App.css| App.js| index.js|+---components +---Pagination |...原创 2019-07-07 22:05:10 · 1022 阅读 · 0 评论 -
babel 基础概念理解及新手入门初体验
一、Babel基础知识点的介绍1. 什么是 babel, babel的简介和概述Babel 是一个 JavaScript 编译器Babel 是一个工具链(编译器),主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便代码可以运行在当前和旧版本的浏览器或其他环境中。作为一种语言,JavaScript 在不断发展,新的标准/提案和新的特...原创 2019-07-25 16:52:24 · 1099 阅读 · 0 评论 -
nuxt 目录结构及配置文件详解
nuxt 目录结构详解首先我们来看下使用 create-nuxt-app脚手架工具所创建的nuxt项目目录的结构,windows cmd 命令行输入,tree /f /a ,打印如下项目目录结构:C:.| .editorconfig| .gitignore| nuxt.config.js| package.json| README.md|+---assets...原创 2019-07-31 14:57:43 · 6681 阅读 · 0 评论 -
parcel 构建打包 scss、less、stylus css预处理器
scss、less、stylus css预处理器构建在我们开发的过程中,使用CSS预处理器可以极大的提升我们的开发效率,所以使用打包工具开发构建我们的预处理器是非常重要的一环,所以这章节内容,将给大家介绍如何使用parcel打包构建我们的项目中的几款css预处理scss预处理器构建SCSS 编译需要sass(dart-sass的 JS 版本)模块。通过 npm 安装:cnpm ins...原创 2019-09-30 11:39:00 · 1451 阅读 · 0 评论 -
parcel js/css/图片/文件等资源打包构建总结
Parcel js/css/图片/文件等资源打包构建总结本章节呢,大喵将带着大家,使用parcel分别对JS还有其他资源进行打包测试,让大家了解parcel是如何方便快捷开箱即用打包构建的 ~1. Javascript parcel 打包javascript打包是前端开发中最常用的打包,本章节内容呢,将使用parcel来打包 CommonJS 和 ES6 、import() 的JS模块我...原创 2019-09-29 17:06:16 · 3376 阅读 · 0 评论 -
webpack等打包构建工具优秀网站资料搜集整理
01. 自动生成webpack和parcel配置的网站访问地址:https://createapp.dev/简介:可以通过表单交互,自动生成需要的webpack配置主页预览:未完待续……原创 2019-09-29 16:20:55 · 821 阅读 · 0 评论 -
Parcel JS 前端打包构建之完美初体验
初体验Parcel之快速开始我们这章节呢,来体验下这个号称最简单的打包工具parcel工具,它的打包构建使用情况1. 搭建本地环境cnpm inint -ycnpm install parcel-bundler --save-dev2. 创建index.html及index.js文件touch index.html index.js3. 启动本地服务,上浏览器查看打印信息是否...原创 2019-09-26 14:42:38 · 2179 阅读 · 0 评论 -
开发构建脚手架命令行工具总结
构建脚手架命令行工具我们这一章节呢,来总结下构建脚手架的基本过程,总的来说呢,过程也是相当愉快轻松的,愉快,心情完美 ~安装依赖首先我们需要安装构建脚手架所需要的依赖,如下:cnpm install -D commander inquirer chalk ora download-git-repo核心工具:commander、inquirer、download-git-repo每个工...原创 2019-09-24 15:17:32 · 1080 阅读 · 0 评论 -
手把手带你开发一个前端命令行工具
手把手带你开发一个前端命令行工具命令行工具,即 Cli (command-line interface)。是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。在学习这篇教程之前,我们需要先了解 NodeJs, NPM 和一些常用的 shell 命令相关知识点。那怎样才可以从0创建一个命令行工具呢?开发流程1、首先我们...原创 2019-08-22 23:12:41 · 3009 阅读 · 0 评论 -
vue脚手架开发之 babel、postcss配置、多页面打包
进阶阶段 babel、postcss、多页面打包导读在上一章节中,我们学习了开发环境和线上环境的区分,css、js代码分离优化,代码压缩等骚操作;我们这节内容呢,继续打造我们的脚手架工具,Let’s go ~这节内容主要涉及下面这些知识点:css之postcss工程化babel7.x配置根据入口文件,自动生成多页面打包配置postcss问:这是啥?什么鬼?我考,没听试过呀,一...原创 2019-08-21 16:35:54 · 1694 阅读 · 0 评论 -
babel的配置文件的种类及安装使用@babel/cli工具
babel的配置文件的种类及安装使用babelBabel 也由配置文件!许多其他工具都有类似的配置文件:ESLint (.eslintrc)、Prettier (.prettierrc) 等等;所有 Babel API 参数 都可以被配置。然而,如果使用 JavaScript 代码 配置参数,我们就会需要使用 JavaScript 代码版 的配置文件;babel 常用的配置方案你是否希...原创 2019-07-26 16:12:31 · 2314 阅读 · 0 评论 -
webpack 引入の公共模块代码分离及懒加载
webpack 公共引入模块代码分离及懒加载导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test基本的代码分离案例在src目录下编辑index.js如下:import _ from 'lodash' // index.js中引入了lodashimpor...原创 2019-06-18 15:48:42 · 1383 阅读 · 0 评论 -
webpack开发生产环境配置
webpack 生产/线上环境构建导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test配置文件安装webpack-mergecnpm install --save-dev webpack-merge在项目主目录中新建如下几个js文件:D:\me\...原创 2019-06-17 14:14:16 · 1192 阅读 · 0 评论 -
brower-sync、gulp4.x 搭建移动端px自动转vm响应式开发环境
导读由于viewport单位得到众多浏览器的兼容,建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》该篇文章。vw:是Viewport’s width的简写,1vw等于window.innerWidth的1%100vw = 750px 即 1vw = 7.5px详细代码如下//目标://1. 把css里面的px 换算...原创 2019-05-17 19:31:28 · 1175 阅读 · 0 评论 -
gulp配置es6解析
导读默认的gulp打包编译,是不支持es6语法,所以我们需要引入babel进行转换编译步骤安装es6转es5所需要的所有npm依赖包// babel 依赖的包 但是看babel官方说并没有依赖这个如果不安装会报错npm install babel-core --save-dev// 转码所需要的模板npm install babel-preset-env --save-dev/...原创 2019-05-13 17:34:37 · 2367 阅读 · 0 评论 -
gulp报错:The following tasks did not complete: task_name
问题描述在如下代码运行时报错:gulp.task('A' , function(){ console.log('A') });gulp.task('B' , function(){ //运行B之前先去运行A console.log('B')});gulp.task('my-task', gulp.series("A","B",function(){ console.lo...原创 2019-05-13 15:05:13 · 4767 阅读 · 0 评论 -
gulp报错: Task function must be specified
导读运行gulp task_name报错如下信息:assert.js:350 throw err; ^AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (D:\me\gulp\gulp-test\node_modules\_underta...原创 2019-05-13 14:33:21 · 2931 阅读 · 0 评论 -
gulp流(stream) 插件gulp-filter、gulp-flatten和gulp-if案例解读
导读在gulp实现前端自动化的时候,最多的时候就是对流(stream)的分析处理,在某些情景比较复杂的时候,在流处理的过程中很容易出现问题,就比如一些流需要单独过滤处理,但是之后最终却要一起再处理;或者一些多文件夹层级的文件处理,需要提取某一层级的文件,或者把所有层级的文件全部提取出来,放在一个层级里面;甚至有些管道需要使用条件处理,等等;所以我们这里介绍,gulp-filter、gulp-f...原创 2019-05-22 13:56:26 · 1462 阅读 · 3 评论 -
利用gulp4.x自动化添加版本号 前端静态资源版本更新
导读项目每次发布后,会有缓存问题,导致页面不更新,尤其是微信浏览器,缓存情况更为严重。然后利用gulp 给js,css自动化添加版本号,可解决缓存的问题。网上资料中一般有两个方法:生成一个新的dist目录,里面包含了要发布的html,js,css等文件 。在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件。最新gulp版本的修改方案如下:首先安装如下依赖c...原创 2019-05-16 21:33:53 · 1563 阅读 · 0 评论 -
gulp处理多文件流合并处理及根据注释向页面自动植入js和css
导读在前端自动化项目过程中,会根据项目需求,实现一些特殊的需求,就比如把本地引入的第三方库资源批量植入页面html,或者类似于一些相同工作流,只是入口出口不一样,我们需要合并统一处理工作流,减少我们的task,使用函数封装一个单独的定制的task根据上面这些功能,我们引入merge-stream和wiredep这两个功能插件,具体实现的功能,请看下面的小案例:merge-stream一个g...原创 2019-05-24 15:31:47 · 2035 阅读 · 0 评论 -
gulp-print、gulp-bump与gulp-header npm第三方库插件解读
导读在实际开发过程中,我们需要使用一些工具来带打印出我们的文件,所以我们需要使用gulp-print这个插件,这个插件有一个回调,回调的参数是当前处理的文件路径,当然在某些时候,我们也需要修改json配置,所以我们需要用到gulp-bump这个插件;最最常用的就是我们需要在很多文件的头部需要加上我们开发者自己专属签名,所以需要使用gulp-header这个插件解读 gulp-print文档地...原创 2019-05-20 23:08:24 · 1326 阅读 · 0 评论 -
gulp-zip、gulp-task-listing、yargs 插件gulp项目案例实战练习
导读在工作开发中经常需要压缩工具,进行对自定文件进行自动压缩打包,所以我们用到gulp-zip这个插件有时候在gulp工作流定义太多的时候,需要随时查看task的数量和状态,所以我这个时候就可以用到gulp-task-listing,不过使用命令行gulp --tasks也可以做到在处理一些生产环境 ( dev )或者线上环境 ( prod )需要单独打包编译的情况下,我们就需要对命令行进...原创 2019-05-18 11:52:27 · 1205 阅读 · 0 评论 -
gulp-swig动态数据模板编译输出html文件
导读在node开发的过程中使用使用swig模板的情况比较多的,所以呢,如何快速便捷编译swig模板成为我们的一个面临的选择,使用webpack下的loader,还是gulp生态圈的插件呢?这里我推荐使用gulp-swig插件,可以在本地使用swig快速开发web项目,包括数据的输入,模板的继承等等推荐官网文档:https://www.npmjs.com/package/gulp-swig...原创 2019-06-05 15:35:55 · 1368 阅读 · 0 评论 -
webpack安装和基本构建
webpack指南梳理学习 - 安装和基本构建导读webpack是前端开发过程中使用超多,用户量超广的一款前端开发打包编译工具,用起来让你欲罢不能,爱不释手。作为目前最火的打包工具,它又是如何使用工作的呢?接下来,我们来通过官网的指南学习梳理webpack的基础知识,掌握webpack的常用功能知识点webpack安装前提在学习之前,我相信你们已经基本掌握前端的相关基础知识点,而且本地电...原创 2019-06-11 10:57:26 · 759 阅读 · 0 评论 -
webpack 缓存问题处理解决与性能优化方案
webpack 缓存问题处理解决方案导读在该篇博文中,我们将逐步实现文件hash后缀的输出,修改某个文件,才会对应输出修改该文件的hash后缀,同时满足性能优化,客服端服务端代码同步更新项目地址:https://github.com/RiversCoder/webpack-test官网介绍在之前的指南案例中,我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生...原创 2019-06-20 17:04:18 · 2607 阅读 · 0 评论 -
如何制作一个gulp生态插件?gulp插件实战案例开发
在使用`gulp`构建前端项目的时候,可能会需要一些功能,但这些功能目前没有`gulp`插件实现,所以可能需要自己写一个插件来满足开发使用。但是,如何开发一款`gulp`插件呢?原创 2019-06-04 14:46:20 · 978 阅读 · 0 评论 -
gulp-jade 动态数据渲染编译模板 热更新案例开发
导读我们今天来聊一聊如何使用gulp编译生成jade模板;如果你想快速编写html,就可以使用node下很火的一款模板语法jade,但你便写完代码后,想要立即看到效果就可以使用gulp生态里面的gulp-jade插件,它可以把jade文件动态编译渲染成html,包括数据列表的渲染我们要实现的目标效果是:编辑jade文件保存,页面自动热更新案例代码 - 第一阶段 ( 初级阶段 )下面这个...原创 2019-06-03 16:09:47 · 1203 阅读 · 0 评论 -
webpack热更新案例实现
webpack热更新案例操作导读模块热替换(Hot Module Replacement 或 HMR), 也叫热更新,它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行浏览器刷新或者命令行重启。注意:热更新 HMR只能在开发环境使用,不适用于生产环境使用webpack.config.js启用 HMR启用该功能实际上相当简单。而我们要做的,就是更新 we...原创 2019-06-14 14:50:57 · 2231 阅读 · 0 评论 -
webpack常用开发工具模块介绍
webpack常用开发工具模块介绍导读在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效率,这些工具有哪些呢?source map 自动追踪代码错误所在的文件webpack watch 观察者模式自动编译webpack-dev-server 指定目录启动本地服务webpack-dev-middleware 传递文件给服务器source map 自动追...原创 2019-06-13 17:54:42 · 958 阅读 · 0 评论 -
webpack静态资源管理加载及输出管理
webpack指南梳理学习 - 静态资源管理加载及输出管理导读在webpack中,静态资源管理加载和输出管理是非常重要的一个功能,在模块化开发中起到了很重要的作用,我们通过加载打包css、图片、字体、数据文件等来了解webpack对资源的管理安装依赖cnpm install --save-dev style-loader css-loader # 加载csscnpm install -...原创 2019-06-12 14:38:33 · 1859 阅读 · 0 评论 -
使用 gulp-html-replace 前端自动化配置替换html模板中指定内容
导读在某些开发项目中,我们需要用到动态输出index.html文件,而这个页面文件内的资源也是需要动态加载的,就比如说在线面这些开发条件:一些静态资源需要加版本号动态编译sass,把编译后的内容动态植入html的style标签中,或者自动引用编译好的css文件在index.html文件中,动态插入多个js文件的script脚本内容如果你想往页面中动态插入一些你需要的一些内容,那gulp...原创 2019-05-31 15:00:03 · 5301 阅读 · 0 评论 -
gulp-util、del及gulp-bytediff插件案例开发
导读gulp中很多非常实用的插件,可以大大的增加了前端任务自动化的范围,这篇文章就分门别类的对如下3款常用插件的使用进行详细的介绍gulp-utilgulp-util带有很多方便的函数,其中最常用的应该就是log了。$.util.log()支持传入多个参数,打印结果会将多个参数用空格连接起来。它与console.log的区别就是所有$.util.log的结果会自动带上时间前缀。另外,它还支持...原创 2019-05-19 21:15:24 · 1103 阅读 · 0 评论