精华内容
下载资源
问答
  • 前端工具

    千次阅读 2017-09-06 00:23:30
    还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、...

    1、Atom简介

    Atom 是github专门为程序员推出的一个跨平台文本编辑器。

    2、主要功能:

    支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。

    通过丰富的插件机制可以完成各种语言开发, 常用于web 开发, 也可用于 php 等后端开发。

    3、Sublime Text 简介

    Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
    Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。


    4、HBuilder简介

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。



    展开全文
  • 前端工具大全

    千次阅读 2017-03-01 21:50:03
    前端工具大全 核心 Core HTML(HTML5) CSS(CSS3) JavaScript jQuery ES6 插件 包管理工具 Package Managers NPM Bower Yarn 前端性能 ...

    前端工具大全



    核心 Core

    • HTML(HTML5)

    • CSS(CSS3)

    • JavaScript

    • jQuery

    • ES6

    • 插件

    包管理工具 Package Managers

    • NPM

    • Bower

    • Yarn

    前端性能 Front-End Performance

    • WebPagetest

    • PerfBudget

    • CriticalCSS

    • Picturefill

    编辑器 Text Editors

    • WebStorm

    • VScode

    • Sublime Text

    • Atom

    • HBuilder

    JS框架 JS Frameworks

    • Backbone

    • AngularJs

    • React

    • Vue

    UI框架 UI Frameworks

    • Bootstrap

    • Ionic

    • Foundation

    • FrozenUI

    • materializecss

    • mui

    • Ant Design

    • eleme

    JS预处理 JS Preprocessors

    • TypeScript

    • CoffeeScript

    • Babel

    响应式网页 Responsible WEB Design

    • 渐进增强、可访问性

    过程自动化 Process Automation

    • Grunt

    • Gulp

    模板引擎 Templating

    • Handlebars

    • Haml

    • Jade

    代码质量 Code Quality

    • JSCS

    • ESLint

    浏览器刷新 Browser Refreshing

    • LiveReload

    • Guard

    构建工具 Build Tools

    • RequireJS

    • seajs

    • Browserify

    • Webpack

    CSS预处理器 CSS Preprocessors

    • Sass

    • Less

    • stylus

    后端 Back-End

    • nodeJS

    • PHP

    版本控制 Version Control

    • Git

    • Svn

    代码测试 Testing

    CSS设计模式 OOCSS & Style Guides

    • MVCSS



    核心 Core

    HTML5

    • W3C http://www.w3school.com.cn/html5/

    • W3C https://www.w3.org/html/ig/zh/wiki/HTML5

    • 菜鸟教程 http://www.runoob.com/html/html5-intro.html

    • HTML5中文门户 http://www.html5cn.org/

    CSS3

    • W3C CSS教程 http://www.w3school.com.cn/css/index.asp

    • W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp

    • 菜鸟教程CSS教程 http://www.runoob.com/css/css-tutorial.html

    • 菜鸟教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html

    • CSS参考手册 http://css.doyoe.com/

    JS

    • W3C http://www.w3school.com.cn/js/

    • 菜鸟教程 http://www.runoob.com/js/js-tutorial.html

    • 廖雪峰js教程 http://www.liaoxuefeng.com

    • js标准参考教程-阮一峰 http://javascript.ruanyifeng.com/

    jQuery

    • W3C http://www.w3school.com.cn/jquery/

    • 菜鸟教程 http://www.runoob.com/jquery/jquery-tutorial.html

    • 极客学院 http://wiki.jikexueyuan.com/project/jquery-tutorial/

    • 廖雪峰 http://www.liaoxuefeng.com/wiki/

    • 参考手册 http://www.css88.com/jqapi-1.9/

    • 参考手册 http://www.runoob.com/manual/jquery/

    ES6

    • 阮一峰ES6 http://es6.ruanyifeng.com/

    • 极客学院 http://wiki.jikexueyuan.com/project/es6/

    • JavaScript 标准参考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

    插件

    • parallel.js: 前后端通用的一个并行库

    • zepto: 用于现代浏览器的兼容 jQuery 的库

    • totoro: 稳定的跨浏览器测试工具

    • TheaterJS: 一个用于模拟人输入状态的 JS 库

    • stellar.js: 前端用于实现异步滚动效果的库,现已不再维护

    • skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相

    • Framework7: 前端框架,是开发人员可以基于 web 技术构建 IOS7 程序

    • regulex: 用于生成 正则表达式 的可视化流程图

    • markdown-it: 新型 Markdown 解析器,快速,支持插件

    • multiline: 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc

    • screenfull.js: 全屏插件,支持各大浏览器

    • lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用

    • jquery.hotkeys: jQuery 插件,用于绑定热键

    • breach_core: Javascript 编写的 Browser (浏览器)

    • octocard: 用于生成 Github 信息卡片的库

    • github-cards: 用于生成 Github 信息卡片的库

    • money.js: 轻量级货币转换库,web 和 node 皆可用

    • accounting.js: 轻量级的数字、货币转换库

    • javascript-algorithms: Javascript 实现的各种算法集合

    • lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升

    • seajs: 前端模块加载器,解决模块化、依赖等问题

    • jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库

    • js.js: Javascript 实现的 javascript JIT

    • jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大

    • todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库

    • localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口

    • EventEmitter: 浏览器版的 EventEmitter

    • jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据

    • knockout: 前端 MVVM 框架,用于开发富前端应用

    • mermaid: 可以根据文本生成流程图,类似于 Markdown 的语法

    • js-sequence-diagrams: 另一款可以根据文本生成流程图的库,类似于 Markdown 的语法

    • flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品

    • zoomooz: jQuery 插件,用来处理浏览器缩放

    • fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方

    • mithril.js: 轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React

    • backbone: 强大的前端 MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好

    • jquery.smartbannersmartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持

    • jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等

    • jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条

    • onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8

    • scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好

    • ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果

    • infinite-scroll: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作

    • animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相

    • Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果

    • jquery-validation: jQuery 的一个插件,用于校验 Form 表单

    • BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果

    • emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度

    • qrcode-generator: 各种语言的二维码生成工具

    • device.js: 一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS

    • jquery-qrcode: jQuery 插件,用来生成二维码

    • Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果

    • isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo

    • lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片

    • progressbar.js: 简洁美观的进度条,扁平化

    • pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务

    • spectrum: Js实现的颜色选择器 (Colorpicker)

    • jQuery.countdown: jQuery 倒计时插件

    • summernote: WYSIWYG 富文本编辑器

    • awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观

    • switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器

    • trix: Basecamp 公司出品的富文本编辑器,简洁小巧

    • sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等

    • hyhyhy: 用于创建 基于 HTML5 的 演示文稿

    • swipebox: jQuery 插件,用于处理移动端的触摸事件

    • FileAPI: 前端用户处理文件(拖放、多文件上传等)

    • Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery

    • Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速

    • matter-js: 2D 物理效果引擎,碰撞、弹跳等

    • jQTouch: 用于辅助创建手机端的 Web 应用,支持主题、Zepto.js 等

    • snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库

    • c3: 基于 D3 的图表库

    • echarts: 企业级图表库,百度开发

    • parallax.js: 一个用于响应智能手机 orientation 的库

    • jQuery-Animate-Enhanced: jQuery 动画库的一个增强,用于现代浏览器

    • wysihtml: 富文本编辑器,适用于现代浏览器

    • slip: 一个通过滑动或者拖拽来操控列表的库

    • evil-icons: 一个矢量图库,提供 Ruby/Node 等支持

    • PhotoSwipe: JS 的一个图片展示库

    • focusable: 是页面上一个元素高亮的库,有图有真相

    • firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox

    • jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库,基于 HTML5

    • mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架

    • interact.js: 一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库

    • rebound-js: 实现部分物理效果,Facebook 出品

    • basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存

    • iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的

    • metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品

    • accessible-html5-video-player: Paypal 出品的 Video 播放器

    • loading: 几种 Loading 效果,基于 SVG

    • flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的

    • move.js: 基于 CSS3 的前端动画框架

    • scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo

    • Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库

    • foundation: 另一款前端模版框架,类似于 Bootstrap

    • Flat-UI: Bootstrap 的一款主题,简洁美观

    • iCheck: 一款漂亮的 Checkbox 插件

    • Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb

    • slick: 功能异常强大的一个图片滑动切换效果库

    • SocialButtons: 漂亮的社交按钮

    • sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库

    • web-animations-js: Javascript 实现的 Web Animation API

    • vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画

    • plyr: 轻量, 小巧, 美观的 HTML5 视频播放器

    • timesheet.js: 基于 HTML5 & CSS3 时间表

    • slideout: 一个非常美观的侧滑菜单



    包管理工具 Package Managers

    NPM

    • 菜鸟教程NPM 使用介绍 http://www.runoob.com/nodejs/nodejs-npm.html

    • 淘宝 NPM 镜像 https://npm.taobao.org/

    • npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html

    • npm包搜索地址 https://www.npmjs.com/

    Bower

    • Bower中文网 http://www.bowercn.com/

    • Bower:客户端库管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

    Yarn

    • yarn中文网 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依赖管理

    • YARN 简介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/



    编辑器 Text Editors

    WebStorm

    • 官网下载 http://www.jetbrains.com/webstorm/download

    • 前端网破解版下载 http://www.qdfuns.com/tools

    VScode

    • 官网下载 https://code.visualstudio.com/

    • vscode 插件精选 - 献给所有前端工程师 https://segmentfault.com/a/1190000006697219

    SublimeText

    • 官网下载 https://www.sublimetext.com/

    • 前端网破解版插件版下载 http://www.qdfuns.com/tools

    • SublimeCodeIntel: Sublime Text 的代码补全工具,支持多种语言

    • Emmet:一个用于提高开发效率的编辑器插件,前身是Zen coding

    • SublimeLinter: 一个提供代码质量检测的插件

    • SublimeTmpl:快速新建指定的模版文件

    • Syntax-highlighting-for-Sass:sass代码高亮插件

    • MarkdownEditing: Sublime Text 强大的 Markdown 扩展, 提供快捷键, 主题等

    • ApplySyntax: 辅助检测语法插件

    • CTags: Sublime Text Ctags 支持插件, 需要安装 ctags

    • sublime-react: React 代码高亮

    Atom

    • 官网下载 https://atom.io/

    HBuilder

    • 官网下载 http://www.dcloud.io/



    JS框架 JS Frameworks

    Backbone

    • Backbone.js API中文文档 http://www.css88.com/doc/backbone/

    AngularJs

    • 中文官方文档 https://angular.cn/

    • angularjs中文网 http://www.apjs.net/

    • angularjs教程 http://www.angularjs.net.cn/

    • Angular 基础入门 http://www.cnblogs.com/micua/p/angular-essential.html

    • angular-masonry: Masonry 的 AngularJS 插件,用于瀑布流

    • angular-schema-form: 根据 JSON 生成响应的 Form 表单

    • restangular: Angular 中用来处理 RESTful API 的插件,可替代 $resource

    • ng-cordova: Cordova 常用组件的 Angular 版本

    • angular-translate: Angular 的国际化 (I18n)

    • ng-inspector: Chrome 插件,用于调试 Angular

    • angularjs-style-guide: AngularJS 代码风格

    • ngReact: React 的 Angular 插件,可以在 Angular 中使用 React Components

    • material: Google Material Design 效果的 Angular 实现

    • angular-local-storage: Angular 插件, 提供了对 localStorage 的友好支持, 并对不支持的浏览器使用 cookie 优雅降级

    • angular-filter: 一组有用的 Angular Filters

    • bindonce: Angular 插件, 用于减少 Watcher 的数量, 提升性能

    React

    • 英文官方文档https://facebook.github.io/react/docs/hello-world.html

    • 中文官方文档http://reactjs.cn/react/docs/getting-started-zh-CN.html

    • gitbooks手册https://hulufei.gitbooks.io/react-tutorial/content/introduction.html

    • 阮一峰react入门http://www.ruanyifeng.com/blog/2015/03/react.html

    • 阮一峰React Router入门http://www.ruanyifeng.com/blog/2016/05/react_router.html

    • React Router 中文文档https://react-guide.github.io/react-router-cn/

    • react-redux 中文文档http://cn.redux.js.org/docs/react-redux/index.html

    • 阮一峰Redux 入门教程http://www.ruanyifeng.com/blog

    • react: React 框架源代码

    • react-native: Facebook 出品的使用 React 开发 IOS 原生应用的框架

    • react-hot-loader: 实时调整 React 组件效果

    • grunt-react: React 的 Grunt 组件, 用于将 JSX 编译成 JS

    • touchstonejs: 基于 React 的手机应用前端框架

    • essential-react: 基于 React, ES6, React-Router的一个应用脚手架

    • react-router: React 路由解决方案

    Vue

    • vue官方http://cn.vuejs.org/

    • vuex官方http://vuex.vuejs.org/zh-cn/

    • vue-router官方https://router.vuejs.org/zh-cn/



    UI框架 UI Frameworks

    Bootstrap

    • 最受欢迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

    Ionic

    • 一款接近原生的Html5移动App开发框架 会html css js就可以开发app http://www.ionic.wang/

    Foundation

    • Foundation 中文网 迄今为止最好的响应式前端框架http://www.foundcss.com

    FrozenUI

    • 移动端服务的前端框架 http://frozenui.github.io/

    materializecss

    • 基于Material Design的主流前端响应式框架 http://www.materializecss.cn/

    mui

    • 最接近原生APP体验的高性能前端框架 http://dev.dcloud.net.cn/mui/

    AntDesign

    • 和react配合的UI框架 https://ant.design

    eleme

    • 和vue配合的UI框架 http://element.eleme.io/



    JS预处理 JS Preprocessors

    TypeScript

    • TypeScript 入门教程 菜鸟教程 http://www.runoob.com/

    • TypeScript中文网 https://www.tslang.cn/

    • TypeScript教程gitbook https://www.gitbook.com/

    CoffeeScript

    • CoffeeScript 中文 http://coffee-script.org/

    • CoffeeScript 实用手册 极客学院 http://wiki.jikexueyuan.com/project/coffeescript/



    过程自动化 Process Automation

    Grunt

    • Grunt中文网 http://www.gruntjs.net/

    Gulp

    • gulp.js 中文网 http://www.gulpjs.com.cn/

    • gulp详细入门教程 http://www.ydcss.com/

    • 前端构建工具gulpjs的使用介绍及技巧 http://www.cnblogs.com/2050/p/4198792.html

    • Gulp开发教程 https://www.w3ctech.com/topic/134



    模板引擎 Templating

    Handlebars

    • handlebarsjs官网 http://handlebarsjs.com/

    • Handlebars中文文档 http://www.360doc.com/content/

    • Handlebars.js 中文文档 http://keenwon.com/992.html

    • Handlebars的使用方法文档整理 http://www.tuicool.com/articles/fqQFN3

    Haml

    • haml官方文档 https://github.com/haml/haml

    • haml入门 http://blog.csdn.net/napoay/article/details/50491363

    Jade

    • Jade 官方的英文文档 http://www.w3cplus.com/html/how-to-use-jade.html

    • Jade的使用 http://www.w3cplus.com/html/how-to-use-jade.html

    • 带你学习Jade模板引擎视频 http://www.imooc.com/learn/259



    构建工具 Build Tools

    RequireJS

    • RequireJS 英文网 http://requirejs.org/

    • RequireJS 中文网 http://requirejs.cn/

    • require.js的用法-阮一峰 http://www.ruanyifeng.com/blog

    seajs

    • seajs文档 http://seajs.org/docs/

    • SeaJS从入门到原理 http://www.tuicool.com/articles/FfEJv2u

    Browserify

    • 官网 http://browserify.org/

    • github https://github.com/substack/node-browserify/

    Webpack

    • Webpack 中文指南 http://webpackdoc.com/

    • webpack的实例 http://www.vichily.com

    • webpack的入门 http://www.vichily.com

    • 一小时包教会 —— webpack 入门指南 http://www.w2bc.com/Article/50764



    CSS预处理器 CSS Preprocessors

    Sass

    • sass入门 http://www.w3cplus.com/sassguide/

    • sass参考手册 http://sass.bootcss.com/docs/sass-reference/

    • SASS用法指南-阮一峰 http://www.ruanyifeng.com/blog/

    Less

    • less中文网 http://lesscss.cn/

    • less快速入门 http://less.bootcss.com/

    stylus

    • stylus中文文档-张鑫旭 http://www.zhangxinxu.com/jq/stylus/



    版本控制 Version Control

    Git

    • Git教程-廖雪峰 http://www.liaoxuefeng.com/wiki/

    Svn

    • 史上最简单的SVN使用教程和注意事项 http://blog.csdn.net/fwzkj/article/details/47988885

    • SVN 教程 极客学院 http://wiki.jikexueyuan.com/project/svn/

    • SVN 教程 菜鸟教程 http://www.runoob.com/svn/svn-tutorial.html

    展开全文
  • 下面这些东西在大公司可能不流行(你懂的,大公司喜欢自己造轮子),但绝对是专业前端需要了解的: ...前端工具源,另一个潜在的前端模块源; Browserify:即将过时的基于 CommonJS 的前端模块化方案; Less:等 CS
    
    
    下面这些东西在大公司可能不流行(你懂的,大公司喜欢自己造轮子),但绝对是专业前端需要了解的:

    • Node.js:现代工业化前端的基础;
    • RequireJS:AMD规范,即将过时的 JavaScript 模块化方案;
    • Bower:前端模块源;
    • npm;前端工具源,另一个潜在的前端模块源;
    • Browserify:即将过时的基于 CommonJS 的前端模块化方案;
    • Less:等 CSS 增强工具;
    • Gulp:前端构建工具,如果你在前端开发中不需要使用类似工具的话,我只能呵呵;

    未来的 JavaScript:ES6、ES7,兼容未来 JavaScript 模块化方案类库、代码转化类库等等。


    作者:寸志

    来源:知乎

    -----------------------------------------------------------------------------------------------------------------------------------------

    简评一下业界常用的并且我了解的一些前端工具



    css工具:

    苦于合作的同事一直选的是 bootstrap,我没有认真比较过 sass 与 less 而直接一路用着 less,不过两者其实差不了多少。
    现在貌似流行后处理器了(前面说的两个叫预处理器,我也不知道他们差别在哪),autoprefixer 等,推荐看 Pleeease 这是一个这类工具的集合

    我的另一篇文章 讲解 @media 媒体查询大法:@media是什么?css3 @media媒体查询器用法

    模块化工具:

    首推:browserify 代码架构清晰,你可以自己拔插其中的某些部分,比如替换个 prelude(在浏览器里怎么加载模块的代码,默认是每个编译合并后的 js 都带一小段),或者用诸如 factor-bundle 这样的插件拎出共用组建来。因为架构清晰代码量小,你可以通读源码了解其原理。

    其次:webpack,不得不说 webpack 很强大,如果要用 react 的话 react-hot-loader 这样的插件目前只此一家。对我来说它的问题在于太庞大了,我无法理清其全貌怕用在项目里踩坑自己无法解决。

    不推荐:require.js sea.js,两个都是要过时的东西,在我还没成为 sea.js 黑前,就是坚定的 require.js 黑了。两者的共同问题是要为每个文件写首尾的 wrapper 在浏览器端去解决,而不是像前两者在开发部署阶段去处理,require.js 问题最大,好歹 sea.js 还和 node.js 有所兼容。

    流程工具/部署前处理:

    部署前处理主要包括用前面的模块化工具打包、生成版本号、压缩文件等。我主要用 gulp 来做这些事,从来都不会用也不喜欢 grunt,百度的 FIS 听说过但不了解,读过@张云龙 的文章推测应该还不错。我的建议是@张云龙 的文章必读而 FIS 可参考,最后用 gulp 来组织自己的工作流。

    如果你用熟了 gulp,你可能会厌倦开工一个项目就想切个页面也要摆好排场写个几十上百行的 gulpfile.js,这时你应该做减法,可以向 substack 学学用 npm run (package.json 里面的 scripts 属性)或者像./task.js 这样的几行代码即可。

    包管理:

    bower:用 github 来做源,国内使用很不堪,如 @yhben 的回复“100k的js,克隆了一个50M的项目”。它可能简化了一点点你去 github 上搜索代码下载保存的工作,但被要下载全库这个缺点抵消了,对于依赖管理,我觉得他真没做多少事。

    npm:我是无论前端后端甚至 css 都用 npm 的,公司里也用 @苏千@死马 的 cnpm.org 搭了一个私有库在用,个人觉得这个工具一定得掌握好,不然你就自绝于当今前端开发的主流了。

    ----------------------------------------------------------------------------------------------------------------------------------

    Gulp 自动构建 最简洁易懂的教程,没有之一
    展开全文
  • 前端工具-Yeoman模板 + 接收用户输入

    千次阅读 2020-10-20 14:56:48
    前端工具-自定义generator文章中,介绍了如何自定义generator模块,以及生成对应的文件,如果是一个接一个写文件的话 比较费力,好在我们有模板语法通过模板语法,大大提高了效率 模板语法 const Generator = ...

    在这里插入图片描述

    开门见山
    在前端工具-自定义generator文章中,介绍了如何自定义generator模块,以及生成对应的文件,如果是一个接一个写文件的话
    
    比较费力,好在我们有模板语法通过模板语法,大大提高了效率
    
    模板语法
    
    const Generator = require('yeoman-generator');
    
    module.exports = class extends Generator {
      
        //通过模板的方式写入文件到目标目录  模板内部自动使用EJS语法
        //模板路径
        const templ = this.templatePath('foo.txt');
    	//输出目标路径
    	const output = this.destinationPath('foo.txt');
    	//文件内容
    	const content = {title:"hello world",success:"success"}
    	//运行  自动把模板文件映射到输出文件上
    	this.fs.copyTpl(templ,output,consent)
    }
    
    
    接收用户输出
    不知道大家有没有印象,在vue使用过程中,有需要输入项目名称,那么是怎么做到的呢,其实就是接收用户输入信息而已
    为大家演示一下
    
    //只需要实现prompt方法即可,
    
    const Generator = require('yeoman-generator');
    
    module.exports = class extends Generator {
    	prompting(){
    		return this.prompt([{ //可以
    	        type: "input", //输出
    	        name: "name", //key值 name其实就是洗面answer的name
    	        message: "Your project name", //提问信息
    	        default: this.appname //默认名字
    	    }]).then(answer => { //支持链式调用
    	        //answer => { name :"user input value" }  并且挂载到this以便于更好地调用
    	        this.answer = answer
    	    })
      	}
        //通过模板的方式写入文件到目标目录  模板内部自动使用EJS语法
        //模板路径
        const templ = this.templatePath('foo.txt');
    	//输出目标路径
    	const output = this.destinationPath('foo.txt');
    	//文件内容
    	const content = this.answer //在这里将content替换成this.answer
    	//运行  自动把模板文件映射到输出文件上
    	this.fs.copyTpl(templ,output,consent)
    }
    

    谢谢观看,如有不足,敬请指教

    展开全文
  • 前端工具-Parcel

    千次阅读 2020-11-01 20:31:59
    Parcel是一款0配置的打包工具,而且直接使用即可,打包速度快,提供了傻瓜式的使用体验,在相同的项目中使用parcel速度会快很多 因为parcel内部使用的是多线程打包,充分发挥多核CPU的特性,webpack也有这样的功能需要...
  • 超级全的Web大前端工具
  • 前端工具-Rollup

    千次阅读 2020-10-29 17:40:59
    拨云见日 Rollup的存在并不是为了取代webpack,仅仅是弥补webpack的一些不足,webpack和rollup各有各的应用场景, ...rollup专注以ESModule打包,更准确的来说rollup是小而美的打包工具 快速上手 在这里插入代码片 ...
  • 下面是非常好用的前端工具集合连接: http://code.ciaoca.com/
  • 下面这些东西在大公司可能不流行(你懂的,大公司喜欢自己造轮子),但绝对是专业前端需要了解的: ...前端工具源,另一个潜在的前端模块源; Browserify:即将过时的基于 CommonJS 的前端模块化方案; Less:等 CSS
  • 写在前面的话: 最近开始学习Web前端自动化构建,为加深学习效果,整理笔记,作为博客发出。...第一章 现代前端工作流的工具链 脚手架工具 Yeoman: 创建应用 依赖管理工具 Bower: 下载依赖 构建...
  • SqlDbx这款客户端查询以及数据库开发工具虽然短小,但很强大。虽然不及Toad for db2的强大功能,SqlDbx的常用功能一点都不输,且文件...此工具的犀利程度不输与ORACLE前端工具PL SQL。 下载地址:SqlDbx客户端下载
  • 使用Yeoman、bower、gulp前端工具为基础,搭建angularjs做web应用 本文将会使用Yeoman和AngularJS搭建一个功能完整的应用,示例应用将会简短地介绍一些关于Yeoman、Gulp和Bower的特点。 前端工具简介脚手架工具...
  • 常用在线前端工具

    千次阅读 2015-03-20 17:06:24
    收集了一些比较实用的Web在线工具,可以极大的方便我们前端开发。
  • 前端工具HBuilder 使用方法

    千次阅读 2020-06-09 23:26:34
    HBuilder工具的部分快捷键使用,熟练使用可以增加工作效率 其他一些编译软件使用方法也有类似的快捷键 目录HBuilder的使用方法,快捷键之类的1. 替换功能2. h标题生成快捷方法3. 生成乱数假文4. 生成大量含有乱数假...
  • 前端工具 -webpack插件篇

    千次阅读 2020-10-26 18:51:28
    拨云见日 webpack 以插件的形式提供了灵活强大的自定义 api 功能。使用插件,我们可以为 webpack 添加功能。 ... ... ...作为 webpack 的使用者和开发者,如果想要玩转 webpack,自定义一些自己的 webpack 插件是非常有必要...
  • 前端工具之Vue-Generator

    千次阅读 2020-10-20 16:44:27
    这个文章主要我自己的写的脚手架,这个脚手架实现比较简单,项目已放在gitee望各位大佬点个star 也已经发布到npm上面了 通过npm/yarn 安装均可 npm方式:npm/cnpm i handsome-vue -g yarn方法:yarn add handsome-...
  • 前端工具-webpack热替换

    千次阅读 2020-10-27 17:37:11
    开门见山 Hot Module replacement 翻译成中文是模块热替换/热更新,模块热替换/热更新概念类似于电脑中的热拔插,主要指的是运行时的变化 模块热替换/热更新指的是,应用运行过程中实时替换某个模块,而应用的运行...
  • 前端之美:GitHub前端工具整理汇总

    千次阅读 2016-06-29 13:37:33
    GitHub在前端用到的一系列工具基本上都是开源的。现简单地整理如下。 1. HTML / CSS / JavaScript 1.1. HTML模板 GitHub的标记 & 模板风格指南:https://github.com/styleguide/templates 1.2. 样式 & ...
  • # 1、忽略目录fd1下的全部内容;注意,不管是根目录下的/fd1/目录,还是某个子目录/child/fd1/目录,都会被忽略; fd1/* # 2、忽略根目录下的/fd1/目录的全部内容; /fd1/* # 3、忽略全部内容,但是不忽略....
  • 拾色器前端工具

    2019-10-05 17:58:33
    链接:https://pan.baidu.com/s/1DJjGDJuTC726mTUfGXFUJg 密码:sn77 截图: 转载于:https://www.cnblogs.com/LCH-M/p/10431920.html
  • Hbuilder:国产前端工具,如果是开发APP,用这个比较好。 Webstorm:jetbrains大法好,好的产品太多了,像IdeaJava开发的必须工具。 VSCode:微软出的,vue EsLint规范 决定后选择VSCode 原因主要是自动提示、自动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,177
精华内容 21,670
关键字:

前端工具