代码非常多，意味着，我们需要在不同的网站下载不同的js代码（js库）， 非常麻烦，而且，如果js代码之间互相有依赖，那么还需要把依赖的js下载下来。...b.所以Npm把所有第三方js库收集在一起，放在npm的服务器上，这样，程序员每次下载时，统一从npm下载。而且，npm还可以管理js之间的依赖关系。一个包就是一个js库。...插件，把若干个小js文件合并成一个大的js文件，可以减少http的请求（提高项目的性能）。...(“gulp-concat”); 随后如果要合并index.js和tools.js两个文件 则继续在gulpfile.js的文件中输入如下所示 （ 接着上面的启动监听） 若要压缩则如上所示...，在合并后进行压缩，在合并的文件common.js若再次更改，则继续压缩 执行.pipe(uglify()） 随后在cmd命令行输入 gulp watchall 进行监听 ⑤ 重命名（js文件） 使用
Node.js 通读 Node.js 官网手册 及 StackOverflow Thred，可以让你尽快了解什么是 Node.js 平台。...install -g bower Gulp 我们还会使用 Glup 自动化构建工具 来管理开发组件。...安装 Glup 需要预先安装 Node.js 和 npm，然后使用 npm 执行下面的命令进行全局安装 Glup： $ npm install -g glup Note: Your user might...initiate a bower installcommand to install all the front-end modules needed for the application. 1.4 使用 Glup...启动项目 完成所有安装工作后，就可以使用 Glup 启动并运行项目，仅需执行下面的命令： $ glup 项目会在 3000 端口执行，所以我们可以在浏览器输入 http://localhost:3000
自动生成路由 利用glup以及glup-rename来完成我们的自动化生成，实际上node也可以来完成，node作为前端工具来说是相当不错的，但我们这里主要叙述利用glup来完成。.../src/static/app/js/route/menus.json' // 定义输出目录 const MUNUS_DEST_PATH = '..../src/static/app/js/route/' 定义好模板后，我们利用through2来处理流，以及占位符来替换掉我们想要的路由。..., subRoutes.join('')) file.contents = Buffer.from(final) return cb(null, file) }) } 最后我们利用glup.../src/static/app/js/route/menus.json' const MUNUS_DEST_PATH = '.
自上次发表了 Grunt：初次使用及前端构建经验 后，前端同学 cobish 对笔者说，grunt 不太好用，现在我们项目中已经不用了，现在用 glup。什么？那你赶紧给笔者我介绍一下。...好吧，看完后，笔者又整理了一篇关于我们在项目中，使用 glup 的前端文章分享给大家。 gulp 初试用 在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。...gulp 打包 requirejs 目前我的项目是一个页面一个 js 入口，比如登录页面的入口是 login.js，而主页面的入口是 home.js，它们都是在同一个目录下。...├─ mod ├─ home.js └─ login.js └─ config.js ├─ gulpfile.js └─ package.js.../mod/*.js') .pipe(requirejsOptimize({ mainConfigFile: 'src/js/config.js', exclude: [
重点是要说一下js。 ? 如果你有编程经验，比如写过php，Java，c等，也许还能理解现在的前端工程师在做大型的webapp的时候的复杂程度。...我想写js的开发者肯定都会用原生js与jquery库，只要对原生js理解得很透彻，jquery用得很熟练，几乎所有的项目，无论多么复杂，都可以慢慢的写出来。...首先当前流行的js框架，js库很多，你得每天去关注，你得了解这些框架分别是干什么，因为你只有先了解了，你才去学习，你觉得有用才去学习，不然还真就是浪费了你的时间，因为东西太多了。...除了框架，还有前端工具（yeoman grunt bower glup），有些人总是不断在开发一些自称可以提高开发效率的工具，包括google，结果本来里面就还有bug就发布出来，狂热的开发者就去安装，...前端还分为css框架与js框架，还上面mvc，mvvm框架，还上面组件式开发，专业术语都听得头大，听得我都有点专业术语恐惧症了。
一、基础层（浏览器原生支持html/css/js） HTML超文本标记语言，用标签构建网页的内容。HTML5扩展了标签及其功能。 CSS层叠样式表，控制页面内容的表现。...JS原生API不好用，还存在浏览器兼容等问题。 这些问题，前端开发者通过多年的填坑，花费巨大的精力封装了各种框架层，用来减少开发工作量。...这些都让前端开发越来越重，但js本身不能很好的实现模块化管理，所以出现了require、sea等AMD和CMD的模块加载框架。...随着自动化工具glup、webpack的火热，多种多样的预编译程序（如HTML模板引擎jade、Ejs等，CSS预处理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue...等如雨后春笋般蜂拥出现，前端开发进入一次全面封装的时代，组件化开发模式在一定程度上，利用JS的可编程性管理html和css，最后通过编译，再生成浏览器识别的HTML/CSS/JS。
1.1 环境搭建 1.1.1 node ☞ 概述 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。...Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。...Webpack 已经是大部分前端项目打包工具的首选，grunt、glup、browserify 等逐渐沦为辅助甚至完全被替代。...在 grunt、glup、browserify 等已经相当火了之后，webpack 长江后浪推前浪，把前辈们拍死在沙滩上，实力惊人。 ?...src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
有typescript 编译、glup 编译less文件等样式，以供参考 。 编译typescript的有两段，一看就明白意思，我们用第2段的内容。...此时会在ts文件旁边生成js ,map两个文件 。 ?...reference path="jquery/jquery.d.ts" /> 之类的话 3、输入 $ ，它已经能智能提示了，看来tsd.d.ts是全局可见，作用类似_referece.js
客户端：采用react+antd，webpack打包，glup构建，采用ES6的语法编写。 管理员端：angular2，采用TypeScript语法编写。...2.1 云主机 2.2 云数据库 2.3 云对象存储 3 项目部署 3.1 后台服务部署 安装pm2 npm install -g pm2 启动后台服务 pm2 start app.js -name
Transform js文件 对于js文件来说，则是一个拼装的过程，如下是我们的app.js文件： ? 它在转换后会变成： ? 我假装你已经知道这是什么了，反正我也不想、也不会解释了~~。...我简单的拆分了WXWebview.js得到了几个功能组件： define.js，这里就是定义AMD模块化的地方 exparser.js，用于转换WXML标签到HTML标签 exparser-behvaior.js...page.js，核心代码，即Page、App的定义所在。 report.js，你所说的一切都能够用作为你的呈堂证供。...wx.js，同上，但是略有不同。 wxJSBridge.js，Weixin JS Bridge 于是，我就用上面的组件来定义不同的位置好了。...然后在我们的html中引入各个js文件，啦啦。 我们还需要一个自动化的glup脚本来watch wxml和wxss的修改，然后编译，如： ?
等 C.前端组件化方案 1.模块是语言层面的，在前端领域我们说的module一般都是指JS module，往往表现为一个单独的JS文件；前端组件则更多是业务层面的概念，可以看成是一个可独立使用的功能实现...实现了多任务配置、组合和运行（npm install grunt-cli -g） Glup，吸取了Grunt的优点，通过流的概念来简化多个任务之间的配置和输出，让任务更加简洁和易于上手（npm install...glup-cli -g） 3.模块打包工具：Bundler、webpack Bundler的主要任务是突破浏览器的鸿沟，将各种格式的JS代码甚至是静态文件，进行分析、压缩、合并、打包，最后生成浏览器支持的代码...二、webpack A.webpack的特点与优势 1.RequireJS的特点： 对CommonJS规范（Node.js模块所采用的规范）的模块代码进行的转换与包装 对很多Node.js的标准package...它可以定义类似HTML一样简洁的树状结构，结合了js和HTML的优点，可以像平常一样使用HTML，也可以在里面嵌套js语法，在浏览器中不能直接使用这种格式，需要添加JSX编译器 Virtual DOM：
网上有人会纠结该用 Grunt 还是 glup。...个人认为，其实无论是 Grunt 还是 glup 都是构建工具，基本的功能都差不多，与其浪费时间纠结该使用哪个，还不如先开始选择一个使用，等过段时间熟悉后再考虑是否接触另一个，最后再比较出哪个更适合自己岂不更好...部分代码（以 js 为例）如下： // 文件合并 concat: { js: { files: { 'dest/js/index.js': ['src/js/index/*.js...*.min.js'], dest: 'dest/js', ext: '.min.js' } }, // 删除多余的文件 clean: { js: ['dest/js/*js',...dest/js/*.min.js'] }, // 文件监控 watch: { js: { files: 'src/js/**/*.js', tasks: ['concat:js',
典型的JS/CSS/HTML结构，微信非得重新取个名字也没办法，逼格还是得有的。 ? 然后去看了下官网文档，真的是吃了一惊，文档少的可怜，不是说不全面，而是确实微信就提供了这么多原生功能。...很多常用的JS组件全都没有，看样子之后很多地方都需要自己实现。 大概浏览了一遍，开发逻辑基本和常规前端无异，如果遇到大工程，可以用glup或者grant等工具。
本文章将从部署速度和访问速度两方面说说如何优化Hexo博客部署速度我们可看到Hexo的官网上告诉我们Hexo的生成速度还是很快的那为啥需要那么长时间呢，我们看看部署的流程从NPM安装包运行Hexo生成指令glup
页面也能自动刷新 可以修改css，less，scss文件 google国内被墙了，可以通过国内镜像网站下载 二、livereload(支持css，sass，less，html，js...，图片等) 本质是监控文件修改，实时刷新浏览器，需要安装livereload插件和node.js插件，全局刷新 安装本地插件： npm install -g livereload...ctrl+s保存后实时刷新 结合gulp，实现刷新： npm init 这样，就创建了一个package.json的文件 这个文件用于标识node.js...gulp.src(file.path).pipe(livereload()) }) }) 安装gulp npm install gulp -g npm install gulp 安装glup-livereload...{ "enabled_plugins": [] } 三、Browser-Sync（所有类型文件，支持gulp脚本） 代理服务器监听文件，不需要安装浏览器插件，只需安装node.js
以一致的方式处理各种资源依赖，通过loader屏蔽掉了资源类型差异（js是module，css是module，img也是module……），优势如下： No more carefully placing...第一点不支持也不要紧，但第二点着实头疼，二级依赖是不可控的，总是不可避免地会遇到cjs模块无法转自动换到ES6 module的一些问题，例如： ‘foo’ is not exported by bar.js...(imported by baz.js) 一些场景可以按照Troubleshooting通过namedExports的方式不太愉快地解决，另一些时候通过external或globals绕过去，甚至还有需要调整...典型的，如果业务本身没太多第三方模块依赖，并且风格约定遵循ES6 module，用rollup构建App也很合适（Code Splitting等也不是完全做不到） P.S.另外，rollup也不太容易像glup...">
composer cp iterm2 docker git git-extras git-flow go golang autojump svn gradle npm yarn node sbt grunt glup
error", "always"], // 强制使用一致的反勾号、双引号或单引号 "quotes": ["error", "double"] } } 新建src目录，然后里面新建index.js...获取更改的内容 可以通过参数--diff-filter 配置条件 npx eslint $(git diff --cached --name-only --diff-filter=ACM -- '*.js...，git commit -m 'test'就会发现没有 commit 成功，报错了，如下图 如果把 index.js 的代码修改如下： console.log('object') 执行git add...配置例子作用：对 Git 暂存区代码文件进行 bash 命令操作等等 npm i lint-staged -D 根目录下新建.lintstagedrc文件 { "*.js": "eslint"...必须符合下面的格式 注意冒号后面有空格 git commit -m [optional scope]: 常用的 type 类别 build：主要目的是修改项目构建系统(例如 glup
还是在ajax的过程中调用这个对象的属性 发现属性的值并不会随着cookie的变化而变话 还是保持老值
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
