zoukankan      html  css  js  c++  java
  • gulp详细入门教程

    文章摘抄自网络,用于记录学习

    安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

    1、安装nodejs

    1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

    1.2、安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。

    2、使用命令行(如果你熟悉命令行,可以直接跳到第3步

    2.1、说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);

    2.2、注:之后操作都是在windows系统下;

    2.3、简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

    node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

    npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?稍后解释

    cd定位到目录,用法:cd + 路径 ;

    dir列出文件列表;

    cls清空命令提示符窗口内容。

    操作方式:

    window + r 输入cmd回车

    node -v    //查看nodejs 版本号  未能出现版本号 请尝试注销电脑重试;

      显示结果:v0.12.0

    npm -v  //查看npm版本号

      显示结果:2.5.1

    cd d:wampwww  \定位目录

    d:  \因为当半位于不同盘符,所以还需要输入d:才能正确定位 也可先定位到D盘,然后再定位目录

    dir  //查看当前定位目录下的文件

    cls  //清空面板内容

    npm stall -g gulp  //全局安装gulp

    gulp -v   //出现版本号即为正确安装

    npm init   //创建package.json文件

     

    3、npm介绍

     

    3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

     

    3.2、使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

     

    3.2.1、<name>:node插件名称。例:npm install gulp-less --save-dev

     

    3.2.2、-g:全局安装。将会安装在C:UsersAdministratorAppDataRoaming pm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

     

    3.2.3、--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

     

    3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

     

    3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包)。

     

    3.4、使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

     

    3.5、使用npm更新插件:npm update <name> [-g] [--save-dev]

     

    3.6、查看npm帮助:npm help

     

    3.7、当前目录已安装插件:npm list

     

  • 相关阅读:
    Spring+redis整合遇到的问题集以及注意事项
    Map源码学习之HashMap
    评分---五星好评
    下拉复选框
    倒计时按钮—获取手机验证码按钮
    input上传文件个数控制
    ajax请求完之前的loading加载
    获取浏览器滚动距离
    获取浏览器可视区域宽高
    获取元素尺寸宽高
  • 原文地址:https://www.cnblogs.com/maixi/p/5066486.html
Copyright © 2011-2022 走看看