美文网首页
安装gulp以及简单的使用

安装gulp以及简单的使用

作者: 五锅锅 | 来源:发表于2017-03-16 16:59 被阅读811次

好记性不如烂笔头,很多东西久了不用还是会易忘,特别是技术性的东西或是繁琐的操作

gulp 是前端的构建工具,配置不繁琐,而且学起来也容易。
安装gulp之前确保你安装nodejs,如果没安装可以参考这篇文章

安装gulp

$ npm install gulp -g

-g代表全局安装 如果是mac,加上sudo 因为mac全局安装需要权限还需要输入密码,如下

$ sudo npm install gulp -g

安装成功之后,接下来我们需要开始使用gulp了,一步一步操作

  • 新建一个文件夹demo
  1. 进入demo目录:

$ cd demo

  1. 初始化一下npm创建package.josn:

$ npm init

一路回车键

目前demo的目录
  • 下来gulp登场:

npm install gulp --save-dev

你肯定有疑问,为什么还要再安装一下?前面不是安装过了吗?因每个单独的项目要使用gulp都需要再安装一次。--save-dev是把gulp写进package.josn的依赖中

安装gulp中 安装gulp成功之后目录多了一个node_modules文件夹
  • gulp有集成很多功能,比如gulp-less、 gulp-cssmin、 gulp-uglify、 gulp-connect、 gulp-concat 、gulp-imagemin、 gulp-clean。常用有less转css的gulp-less、css压缩体积的gulp-cssmin、js压缩体积的gulp-uglify、也可以用图片压缩gulp-imagemin。安装全部命令:

$ npm install gulp-less gulp-cssmin gulp-uglify gulp-connect gulp-concat gulp-imagemin gulp-clean open --save-dev

压缩命令执行
  • 新建文件夹src ,为什么必须要是src?因为gulpfile.js文件指定src,你也可以修改配置文件的文件夹名。
  • 进入src文件夹新建demo.html 和js文件夹,在里面随便写点什么,
src目录
  • 最后一步了:终端运行命令

$ gulp

然后在index.html编辑代码看看浏览器有啥变化没?

使用bower下载第三方类库

  1. 检测是否安装 $ bower -v
  2. 如果没有则安装$ npm install bower -g
  3. 在demo目录下 $ bower install xxx 比如下载angular-ui-router $ bower install angular-ui-router
  4. 搞定。
完成

相关文章

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • 安装gulp以及简单的使用

    好记性不如烂笔头,很多东西久了不用还是会易忘,特别是技术性的东西或是繁琐的操作 gulp 是前端的构建工具,配置不...

  • html代码复用各种方法

    1.gulp-file-include(工具) 使用步骤:1.安装gulp以及gulp-file-include(...

  • 自动任务管理工具 -- gulp

    Gulp的安装和使用 Gulp是一款简单的自动任务管理工具。进入项目目录,运行下面的命令。 Gulp需要全局安装 ...

  • 从使用到案例分析如何使用Gulp

    我们在《自动化构建篇之Gulp(一)》中已经初步介绍过了Gulp以及Gulp的简单的使用方式,了解了Gulp中的任...

  • gulp前端静态页面工程化

    安装gulp以及gulp-file-includenpm install -g gulpmkdir gulp-fi...

  • 前端构建工具gulp的安装与使用

    简单学习一下gulp的使用。 一、安装 1、安装node 安装地址:https://nodejs.org/en/ ...

  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得...

  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得...

网友评论

      本文标题:安装gulp以及简单的使用

      本文链接:https://www.haomeiwen.com/subject/edejnttx.html