toc AngularJS项目中js众多,上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp,推荐访问Gulp开发教程(翻译)。...的插件,因此顺理成章: var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); var gutil = require...('gulp-concat'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename');...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意...')) .pipe(gulp.dest('js/')) });
基于Node.js的自动化工具Gulp What is gulp?...gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfile.js。...工作方式 在介绍gulp API之前,我们首先来说一下gulp.js工作方式。...].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 获取流 gulp.src()方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(...var gulp = require('gulp'); gulp.src('script/jquery.js') // 获取流 .pipe(gulp.dest('dist/foo.js
---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具,类似 Grunt, 要使用它,你的机器上需要装有 Node.js。...gulp.task('default', ['js']); 完整的 gulpfile.js: // 定义依赖项和插件 var gulp=require('gulp'), gutil=require...gulp.task('js', function(){ gulp.src('..../js')); }); // 定义默认任务 gulp.task('default', ['js']); 回到命令行(项目根目录),输入 gulp, 回车。.../js/*.js', ['js']); 这行代码执行时, Gulp 会持续监控 ./js/ 目录下所有的 js 文件,一旦文件发生变化,就会自动重新执行 "js" 任务来合并和压缩文件。
需要在fundebug上注册账号并创建项目,检测bug也是通过fundebug后台来管理bug的 1.安装插件 npm install fundebug-javascript --save 2.导入模块
只对发生更改的 js 文件进行语法检测 更现实的开发场景是, 项目代码已存在很久,代码中有大量的不符合 jshint 规范的代码。...而根据当前的 gulp 配置,每次发生修改,都会全量检测一遍所有的文件的语法问题,实际上已存在的问题我并不想在本次提交中修复(同时也是其他同事写的,例如不加分号问题,改动量太大)。...结果就是,一启动 gulp,哗哗的语法错误提示,根本找不到自己想看的文件检测结果。这时修改一个文件,又对所有文件做了一次全量检测,又是哗哗的满屏错误提示。而我只关心当前修改的文件检测结果。.../src/**/*.js', ['jshint']); }); gulp.task('default', ['jshint', 'watch']); 这样就能清晰的看到刚才发生修改文件的语法检测结果了...concat = require('gulp-concat'); gulp.task('js', function () { return gulp.src('js/*.js')
环境准备 gulp-file-include 是gulp的插件,所以需要先安装gulp npm install -g gulp npm install gulp --save-dev npm install...name @@age @@socials.fb @@socials.tw gulpfile.js...-g 2.安装md插件 > npm install markdown gulpfile.js const fileinclude = require('gulp-file-include'); const...some.html', { "nav": true }) @@if (name === 'test' && nav === true) { @@include('test.html') } gulpfile.js...使用 index.html @@for (var i = 0; i < arr.length; i++) { `+arr[i]+` } gulpfile.js
gulp-clean --save-dev //- 用于删除文件 npm install gulp-uglify --save-dev //- 压缩js代码...第四步:创建一个gulpfile.js文件,该文件和node_modules文件夹平级 gulpfile.js文件内容如下: gulpfile.js: var gulp = require('gulp'....pipe(clean()); }); /*压缩js文件,并生成md5后缀的js文件*/ gulp.task('compress-js',function (callback) { //-...创建一个名为compress-js的task gulp.src(['webContent/js/**/*.js']) //- 需要处理的js文件,放到一个字符串数组里...rev-manifest.json .pipe(gulp.dest('rev-js')) //- 将rev-manifest.json保存到 rev-js
方案一:基于Node.js的专用构建工具(Grunt、Gulp、Brunch、Broccoli、Mimosa) 方案二:npm run命令(教程1、2、3) 方案三:make命令 我觉得,make是大型项目的首选方案...npm run可以认为是make的简化形式,只适用于简单项目,而Grunt、Gulp那样的工具,有很多问题。 (1)插件问题 Grunt和Gulp的操作,都由插件完成。...(2)兼容性问题 插件的版本,必须与Grunt和Gulp的版本匹配,还必须与对应的命令行程序匹配。...(3)语法问题 Grunt和Gulp都有自己的语法,并不容易学,尤其是Grunt,语法很罗嗦,很难一眼看出来代码的意图。当然,make也不容易学,但它有复用性,学会了还可以用在其他场合。...四、检查语法错误 第一个任务是,检查源码有没有语法错误。 js_files = $(shell find .
Python插件中默认使用pylint用来检测python代码的书写是否有错误和是否符合良好的编码习惯。...在面对django框架时表现的有些不足,因为django使用了大量的元编程(metaprograming)思想以及鸭子模型,以至于在程序运行时会修改不少对象的属性和行为,但是这样给pylint这样的语法检测程序带来了比较大的困难
无效 总结 对于基本数据类型, 除了null其他都会返回正常的结果 对于引用数据类型,除了function其他都会返回object 对于null,会返回object,历史遗留问题,也是bug,原因在于JS...A是不是B的实例,表达式是A instance B,返回的是boolean,instanceof检测的是原型,所以他的检测方式是,查看A的prototype是否出现在B的__proto__ 上,也可以理解为...,如果我们要对其检测,需要通过new方式,就可以了。...let str = new String('我是字符串') console.log(str instanceof String) //true 检测引用数据的类型全部正确,所以一般来讲这个方法我们是用于检测引用数据类型的...需要注意的是 检测类型的返回值并不是直接可以使用 是这种格式的[object Array],需要自己进行处理,后面的就是我们的格式 封装 日常开发中,最为准确的就是第三中方法,所以,这里我们来封装一个检测数据类型的方法
碰撞检测 目录 代码实例 与简易拖拽的差异 下载源码链接 代码实例 <div id="box" style="background: #334;width: 100px;height: 100px...Math.max(0, y), height) // 给元素及时定位 box.style.left = x + 'px' box.style.top = y + 'px' // 碰撞<em>检测</em>...document.body.scrollTop - document.body.clientTop } return { x: x, y: y } } })() 与简易拖拽的差异 简易拖拽的链接 简易拖拽 碰撞<em>检测</em>...// 碰撞<em>检测</em> // x坐标值的范围判断,y坐标值的范围判断 var judge_x = (x >= box2X - box2.offsetWidth) && (x <= box2X + box2.offsetWidth
图形平面碰撞的检测方式就是判断点是否同时在两个对象中。比如这个笔记中的例子 impact demo <script src="//code.jquery.com/jquery-2.1.4.min.<em>js</em>
VisibilityChange 事件;用于判断用户是否离开当前页面 // 页面的 visibility 属性可能返回三种状态 // prerender,vi...
使用CSS,我们可以使用 preferreds-color-scheme 媒体查询来检测暗模式。 但是..如果我们必须使用JavaScript怎么办?...首先,检测matchMedia对象是否存在(否则浏览器不支持夜晚模式(dark mode),您可以退回到白天模式(light mode))。...我们可以使用事件侦听器检测模式更改,实现代码如下所示: window.matchMedia('(prefers-color-scheme: dark)') .addEventListener...('change', event => { if (event.matches) { //dark mode } else { //light mode } }) //js判断
什么是碰撞检测 碰撞检测是指两个物体碰撞,或者图片发生重叠之后的检测,这种检测往往在优秀中用的最多,比如飞机大战,子弹与敌机的碰撞等等,这种碰撞一旦被检测到,往往会执行一些事件,比如游戏中的敌人死亡的动态效果...,这就是碰撞检测。...下面是自己实现的两种碰撞检测: 碰撞检测_边缘检测 主要实现div块在上下左右运动中如果碰到边缘,就像相反的方向运动。 实现代码 <!...div.style.left = left + "px"; div.style.top = top + "px"; } //检测是否和边缘碰撞的函数...function(){ move() },20); 实现效果 碰撞检测
npm init -y package.json内容 gulpfile.js 文件需要自己在项目根目录下新建,整个目录结构如下 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小,提高页面打开速度...在 gulpfile.js 中编写代码 var gulp = require('gulp'); // 导入gulp var uglify = require('gulp-uglify');...// 导入gulp-uglify // 创建压缩任务 gulp.task('js', function() { // 1....另存到dist压缩后的文件 .pipe(gulp.dest('dist/js')) }) 执行命令 > gulp js src/js/ext.js 原始的代码如下 压缩后的代码 gulp...', gulp.series(['js', 'html'])); 于是只需要执行gulp目录就可以执行全部了
这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件 然后安装js代码检测插件,压缩文件插件,重名名插件(这里只讲一下这三个插件的使用,当然gulp还有很多强大的插件) js代码检测插件: npm install gulp-jslint –save-dev...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),...uglify = require("gulp-uglify"), rename = require("gulp-rename"); gulp.task("scripts",function...(){ return gulp.src("src/calendar.js") .pipe(jshint()) //检查代码 .pipe(jshint.reporter
Beautiful 格式化代码的工具 5、Dash Dash是 MacOS 的 API 文档浏览器和代码段管理器 6、Ejs Snippets ejs 代码提示 7、ESLint 检查 javascript 语法错误与提示...8、File Navigator 快速查找文件 9、Git History (git log) 查看 git log 10、Gulp Snippets 写 gulp 时用到,gulp 语法提示。...智能提示当前项目所支持的样式 12、HTML Snippets 超级好用且初级的H5代码片段以及提示 13、Debug for Chrome 使用 vs code 来打断点调试 14、Document this Js...的注释模板 15、jQuery Code Snippets jquery 提示工具 16、Html2jade html 模板转 pug 模板 17、JS-CSS-HTML Formatter 格式化
Beautiful 格式化代码的工具 5、Dash Dash是 MacOS 的 API 文档浏览器和代码段管理器 6、Ejs Snippets ejs 代码提示 7、ESLint 检查 javascript 语法错误与提示...8、File Navigator 快速查找文件 9、Git History (git log) 查看 git log 10、Gulp Snippets 写 gulp 使用到,gulp 语法提示。...智能提示当前项目所支持的样式 12、HTML Snippets 超级好用且初级的H5代码片段以及提示 13、Debug for Chrome 使用 vs code 来打断点调试 14、Document this Js...的注释模板 15、jQuery Code Snippets jquery 提示工具 16、Html2jade html 模板转 pug 模板 17、JS-CSS-HTML Formatter 格式化
背景: 基友做了个APP,发了一排二维码,然后互相吐槽了一下,发现移动应用出现也一年了,虽然很简单,但是好像都懒得通过写个JS来判断然后发一个二维码让大家下载应用。...简介: 提供了几个JS接口,通过这几个JS接口,可以轻松获取到当前打开页面的浏览器类型,然后根据类型跳转到对应的链接。同时也提供了两个demo方便大家参考。...核心代码 — Demo2: Demo2相关代码 - download.html: Demo2核心代码 — index.html:Demo首页 — res:页面相关资源 - brower.js...:核心代码 — tools.html:JS调用的整体事例。
领取专属 10元无门槛券
手把手带您无忧上云