Giter Club home page Giter Club logo

yjapp's Introduction

采用ionic开发

ABC ABC

Gulp

当下的前端开发

  • 不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了
  • 我们要提高效率,就必须减少重复的工作
  • 使用less之类预处理的CSS coffeescript
  • 提供开发阶段的便利,开发阶段更快捷
  • 现在的开发行业优质的开发人员是不应该将精力放在这些重复性质的工作上
  • Gulp就是一种可以自动化完成我们开发过程中大量的重复工作
    • 预处理语言的编译
    • js css html 压缩混淆
    • 图片体积优化
  • 除gulp之外还有一些类似的自动化工具,比如grunt
  • what how why

Gulp简介

  • 当下最流行的自动化工具

    • 什么是自动化构建工具?
    • 自动完成一系列重复的操作
      • less → css
      • coffeescript → js
      • css压缩
      • js混淆
      • html压缩
      • img尺寸优化
      • 。。。。
  • 链接:

  • gulp的包既包含工具,也包含一些编程的API

准备工作

  • 安装Node.js
    • Node.js 给前端带来了一场工业革命
    • http://npm.taobao.org/
    • 安装完成过后可以通过命令行工具node -v
    • 安装nodejs过程会自动安装npm(node packages manager)
    • npm 3 以前的版本文件依赖是层级依赖
    • npm 3 以后依赖关系改为平行依赖(windows上路径过长问题)
    • gulp本身是node的模块
  • 安装 gulp 命令行工具
    • npm install -g gulp
    • -g 指的是在全局作用域中安装
    • 测试命令 gulp -v
  • 初始化 gulp 项目
    • 在本地安装gulp包
    • npm install gulp --save
  • 创建任务 - gulpfile.js
    • gulpfile.js 就是gulp的主文件

基本使用

  • 定义一个任务
  • 复制单个文件
  • 复制多个文件
  • globs匹配语法
    • src/*
    • src/*/*
    • src/**/*
    • src/*.jpg
    • src/*.{jpg,png}
    • 多个globs
      • ['src/*.{jpg,png}','a/a.html']
  • 排除某些文件
    • !xxxxx
  • 默认任务
    • gulp 中的任务名有个特殊值 default
  • 文件监视自动执行任务

常用插件

yjapp's People

Contributors

qq756585379 avatar

Stargazers

 avatar XinyiGu avatar roryliu avatar Mavlarn avatar  avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

daviliu

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.