webpack 简单使用
摘要：备注： 使用yarn 结合npm 模块进行简单项目开发 1. 安装 yarn init yarn add webpack --dev yarn global add live-server 2. 添加shoritd 依赖模块 yarn add shoritd 3. 项目结构 ├── index.ht
阅读全文
posted @ 2017-12-29 10:15
随笔分类 - web 构建工具
npm 可执行模块的开发&&私服发布
摘要：备注： 大家日常在使用npm 安装依赖的时候有一些是命令行工具，比如vue-cli,具体的开发比较简单，同时 可以基于此开发一些脚手架，方便开发。 1. 项目初始化 npm init 备注：按照提示书写即可，备注本次使用了npm 私服 （cnpm）所以name 需要按照cnpm scope 的定义，
阅读全文
posted @ 2017-12-27 18:41
parceljs 基本使用———又一个前端构建工具
摘要：备注： 又一个新的前端构建工具 1. 安装 yarn global add parcel-bundler 2. 初始化项目 yarn init -y 3. 基本代码 a. 创建 index.html index.js index.html <html> <body> <script src="./i
阅读全文
posted @ 2017-12-10 19:53
gulp 集成其他基于流的工具
摘要：1. 流、缓冲、vinyl 文件对象 gulp 的流是虚拟文件对象 包含的属性有 base 文件名 path 文件路径 content 缓冲、nodejs 流 2. gulp 集成 browserify browserify 基于文本流，缺少的是base 以及path,可以使用的工具 vinyl-s
阅读全文
posted @ 2017-11-11 18:18
gulp 合格插件评判标准
摘要：官方插件列表： https://gulpjs.com/plugins/ 合格插件的判断标准 1. 不修改内容 如果一个插件一个文件都修改（无论是文案内容，文件路径），那么它就不是一个gulp 插件 2. 一个工具基于流的 那么就不需要使用这个gulp 插件了，直接使用这个工具就行 3. 做了太多的事
阅读全文
posted @ 2017-11-11 17:48
gulp 流处理
摘要：包含的内容： 穿插流 流合并 流队列 流筛选 1. 穿插流 // passthrough stream 把流传递给其他的 // use gulp.src(glob,{passthrough:true}) // function 进行流的合并处理，避免多余配置以及冗余代码 2. 合并流 // 使用me
阅读全文
posted @ 2017-11-11 17:29
browser-sync 服务器使用
摘要：1. 安装 npm install browser-sync or yarn add browser-sync 2. 使用（集成gulp） 备注： gulp 安装使用此处不介绍 默认的端口是3000，默认的ui界面端口3001 可以进行修改 Gulpfile.js 内容 var bSync = re
阅读全文
posted @ 2017-11-11 15:51
gulp 基本使用
摘要：1. 安装 npm install -g gulp-cli && npm install --save-dev gulp or with yarn yarn global gulp-cli && yarn add gulp 2. 使用 基本流程 1. gulp cli 启动命令行工具 2. 本地gu
阅读全文
posted @ 2017-11-11 13:08
yarn workspace 开发示例
摘要：此为官方示例： package.json { "private": true, "workspaces": [ "workspace-a", "workspace-b" ] } Note that the private: true is required! Workspaces are not m
阅读全文
posted @ 2017-11-10 18:19
npm 私服工具verdaccio 安装配置试用
摘要：1. 安装 npm install -g verdaccio 2. 启动 verdaccio // 界面显示信息 Verdaccio doesn't need superuser privileges. Don't run it und warn config file - /root/.confi
阅读全文
posted @ 2017-11-09 22:40
yarn 管理nextjs 项目
摘要：预备环境 nodejs npm 1. yarn 安装 npm install -g yarn 2. nextjs 项目初始化 yarn add next react react-dom 3. 配置nextjs 项目 "scripts":{ "dev": "next", "build": "next
阅读全文
posted @ 2017-11-09 16:42
xcomponent web 跨域组件介绍
摘要：1. 项目地址： https://github.com/krakenjs/xcomponent 2. 支持的特性 a. Render an iframe or popup on a different domain, and pass down props, including objects an
阅读全文
posted @ 2017-11-07 10:18
Webpack-dashboard 简单使用
摘要：1. 安装 npm install webpack-dashboard --save-dev 2. 配置说明 webpack config // Import the plugin: var DashboardPlugin = require('webpack-dashboard/plugin');
阅读全文
posted @ 2017-11-06 14:24
gatsbyjs 使用
摘要：1. 安装 npm install --global gatsby-cli 2. 使用 // 创建项目 gatsby new dalong cd dalong // 启动 gatsby develop -- 使用的是热加载端口 8000 // 编辑源码 src/pages. // 生产构建 gats
阅读全文
posted @ 2017-11-04 13:09
Dawn 简单使用
摘要：1. install npm install dawn -g 2. create project # 1. Create & Initialize dn dev # 3. Li
阅读全文
posted @ 2017-11-03 21:51
Dawn 阿里开源前端开发构建工具
摘要：Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常构建与开发相关的工作。 特点 采用中间件技术，封装常用功能，易于扩展，方便重用
阅读全文
posted @ 2017-11-03 21:24
