千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5开发中有那些比较实用的小工具?

HTML5开发中有那些比较实用的小工具?

时间:2018-01-22 15:35:09     来源:千锋视频教程 作者:教学部

  个人推荐node环境下的gulp工具,可以极大的提升项目开发速度,并且集成了3000种插件,几乎可以满足所有需求

java视频教程

  简单介绍一下如何使用吧:

  1.首先需要在node官网下载安装node环境,http://nodejs.cn/download/可以根据自己的操作系统下载对应版本;

  2.下载后直接使用next安装法,持续下一步就可以了

  3.安装完成后需要在命令行进行node的配置,首先打开系统的开始菜单输入cmd回车或者按下快捷键win+r,输入cmd回车。

  4.输入node –v 查看当前node版本,正常显示版本号表示安装成功

  5.node是一个命令行工具,使用这个工具需要用到两个命令

  npm install 安装软件

  npm uninstall 卸载软件

  6.下面就可以开始使用node的npm命令下载gulp了,首先在命令行中输入

  npm install gulp –g 回车后开始下载

  7.下载完成后输入gulp –v 检查gulp版本号,正常显示表示安装成功

  8.在电脑中任意位置(要能找到)创建一个文件夹,起个任意名字(最好英文)

  9.在命令行中进入新创建的文件夹目录mygulp,使用输入盘符回车,如D: 然后使用cd命令依次打开文件夹直到打开新创建的mygulp文件夹。

  10.此时在当前文件夹的命令行中输入npm install gulp —-save-dev 回车,配置局部gulp环境

  11.下载完成后执行gulp –v 会出现全局和局部的版本号,一致为成功,不一致,删除mygulp文件夹中出现的node_modules文件夹,重新执行第10步

  12.命令行中执行npm init 设置配置信息,可以全部为默认,持续回车直到配置完成

  13.下面就可以开始使用gulp了,首先需要在mygulp文件夹中创建gulpfile.js文件。

  14.在gulpfile.js中首先要引入gulp模块,引入gulp模块,

  let gulp = require("gulp");然后就可以配置gulp的各种功能指令。

  注意:因为node完美支持ES6,所以在node环境中可以使用ES6点所有语法

  此时gulp为gulp模块返回的对象,在这个对象中,有一些方法

  15.下面简单几种gulp指令。

  1》gulp.task("指令名字",()=>{指令执行函数}) 用于绑定指令

  如:

  实现功能将线下版本的文件放在线上版本中

  gulp.task("index",()=>{

  //gulp.src()//找到源文件的目录

  //gulp.pipe()//在连缀之中继续调用gulp方法

  //gulp.dest()//转存方法

  //实现功能的时候,一定要用ruturn

  return gulp.src("index.html").pipe(gulp.dest("dist"));

  })

  在gulp.src中可以接收数组,表示多个文件

  文件名可以用*代替,表示通配

  **/*表示多层文件夹嵌套

  !文件路径,表示除了此文件

  2》gulp.watch() 监控文件功能

  gulp.task("watch",()=>{

  //监控index.html文件,如果发生改变,那么执行index指令

  gulp.watch("index.html",["index"]);

  })

  3》gulp原生默认指令(default):

  default 为gulp自带默认指令,当在命令行中执行gulp后不跟任何指令名的时候,所执行的指令

  gulp.task("default",["watch"]); //第二个参数为要执行的命令名,可以接受多个,表示默认执行的指令

  以上为gulp的原生指令,能实现的功能有限,但是好在gulp继承了大量的插件可供扩展。

  至于插件的使用,可等后续更新……

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱