Git Product home page Git Product logo

frontend-tools's Introduction

frontend-tools

随着时代的发展,前端已经发生了很大的变化,模块化、自动化等等各种技术和工具层出不穷,前端开发已经越来越像一个“真正的开发”,最近在做dashboard项目,对方面感触犹深。

frontend-tools 旨在研究前端用到的各种技术和工具,包括ES6、gulp、webpack、bower、nodejs、browser-sync等等,既是为了自己学习和总结,也是想将这些东西分享出来。

准备环境

首先安装nodejs,装好后运行:

node -v
npm -v

能运行成功说明安装成功了。

如果是在windows下开发的话,首先以管理员身份打开一个命令行,运行:

npm install -g windows-build-tools

这会安装Microsoft开发的windows node开发环境构建工具,参考:Microsoft + Node.js Guidelines

学习技术子项目

每个子项目都独立的,下载下来后都可独立运行

项目 子项目 概述
es6
basicbabel 使用babel编译器将ES6代码编译成ES5代码
closure compiler 使用closure compiler编译器将ES6代码编译成ES5代码
webpackbasic 使用webpack打包模块
webpackbabel 使用webpack打包模块,同时用babel将ES6代码编译成ES5,以屏蔽各浏览器对ES6支持不一的情况
webpack-sourcemap 在webpack中使用source map将编译后的代码映射回原始源代码
css
autoprefix 自动加兼容性前缀
nodejs
node-debugger 使用nodejs自带命令行调试工具调试js
node-debugger-gulp-task 使用node原生调试器调试gulp任务
node-inspector nodejs调试工具
i18n
media
webp 将jpg转成webp,体验webp格式
editor
ace-editor ace-editor是一种能够嵌入网页中使用的代码编辑器,能够支持一百多中代码着色

工程架构子项目

子项目 概述
gulp-sass 主要是为了能够使用sass语法而搭建
gulp-sass-bower 主要是为了能够使用sass语法而搭建,同时使用bower管理运行依赖

测试相关子项目

子项目 概述
karma-jasnine-basic karma+jasmine基础测试环境,支持使用ES6语法,需要chrome浏览器
karma-jasnine-chromeheadless karma+jasmine基础测试环境,使用chromeheadless浏览器,更适合用在服务器上
browser-sync-basic browser sync 框架的基础使用

学习资源

  1. Microsoft + Node.js Guidelines

在windows下开发nodejs应用的权威教程,值得一读

frontend-tools's People

Contributors

chunnallu avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.