代码非常多,意味着,我们需要在不同的网站下载不同的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: [
一、基础层(浏览器原生支持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。
重点是要说一下js。 ? 如果你有编程经验,比如写过php,Java,c等,也许还能理解现在的前端工程师在做大型的webapp的时候的复杂程度。...我想写js的开发者肯定都会用原生js与jquery库,只要对原生js理解得很透彻,jquery用得很熟练,几乎所有的项目,无论多么复杂,都可以慢慢的写出来。...首先当前流行的js框架,js库很多,你得每天去关注,你得了解这些框架分别是干什么,因为你只有先了解了,你才去学习,你觉得有用才去学习,不然还真就是浪费了你的时间,因为东西太多了。...除了框架,还有前端工具(yeoman grunt bower glup),有些人总是不断在开发一些自称可以提高开发效率的工具,包括google,结果本来里面就还有bug就发布出来,狂热的开发者就去安装,...前端还分为css框架与js框架,还上面mvc,mvvm框架,还上面组件式开发,专业术语都听得头大,听得我都有点专业术语恐惧症了。
那具体什么是模块化呢,举一个简单的例子,我们要写一个实现A功能的JS代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,...具体说来,JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。...前端自动化“简单重复的工作交给机器来做”,自动化也就是有很多自动化工具(glup、webpack)代替我们来完成,例如持续集成、自动化构建、自动化部署、自动化测试等等。
有typescript 编译、glup 编译less文件等样式,以供参考 。 编译typescript的有两段,一看就明白意思,我们用第2段的内容。...此时会在ts文件旁边生成js ,map两个文件 。 ?...reference path="jquery/jquery.d.ts" /> 之类的话 3、输入 $ ,它已经能智能提示了,看来tsd.d.ts是全局可见,作用类似_referece.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 实例,同时可以在此文件中引用某些组件库或者全局挂载一些变量。
客户端:采用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等工具。
页面也能自动刷新 可以修改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
本文章将从部署速度和访问速度两方面说说如何优化Hexo博客部署速度我们可看到Hexo的官网上告诉我们Hexo的生成速度还是很快的那为啥需要那么长时间呢,我们看看部署的流程从NPM安装包运行Hexo生成指令glup
以一致的方式处理各种资源依赖,通过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
如何在 JavaScript 中引用 JS 脚本 在 JavaScript 中引用外部 JS 脚本有两种主要方法: 使用 标签 这是最简单的方法,通过在 HTML 页面中插入... 标签来引用 JS 脚本: 其中 src 属性指定要引用的脚本文件的路径。...动态创建并插入 元素: const script = document.createElement("script"); script.src = "script.js
领取专属 10元无门槛券
手把手带您无忧上云