第一步:安装Node

  首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境。访问http://nodejs.org,下载并安装Nodejs ,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。

  为了确保Node已经正确安装,我们执行几个简单的命令:node -v 和 npm -v  来查看一下Nodejs 和 npm的版本号。如果这两行命令没有得到返回,可能node就没有安装正确。

第二步:安装gulp

  安装gulp 分两步:

  一、首先是全局安装  

  在命令行中输入 npm install -g gulp

  安装完成后,你可以使用命令gulp -v 查看gulp的版本号以确保gulp已经被正确安装。

  二、将gulp安装到项目本地.

  使用cd命令进入到项目目录,并在项目目录中创建package.json

{
"name": "name_you_want",
"version": "0.0.1",
"devDependencies": { }
}

  运行命令 npm install --save-dev gulp 将gulp安装到项目本地。这里,我们使用—-save-dev来更新package.json文件,更新DevDependencies值,以表明项目需要依赖gulp。Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系。

第三步:新建Gulpfile文件,运行gulp

var gulp = require('gulp'); 

安装常用的gulp插件

npm install --save gulp
npm install --save gulp-load-plugins

npm install --save gulp-concat
npm install --save gulp-rename

npm install --save-dev jshint gulp-jshint
npm install --save gulp-less
npm install --save gulp-sass

npm install --save gulp-uglify
npm install --save gulp-minify-css
npm install --save gulp-minify-html
npm install --save gulp-imagemin
npm install --save gulp-htmlmin

npm install --save gulp-livereload
npm install --save gulp-connect

npm install --save gulp-plumber
npm install --save gulp-notify

gulp学习笔记的更多相关文章

  1. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  2. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  3. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  4. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  5. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. gulp 学习笔记

    以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录   npm     查看模块     安装模块      ...

  7. gulp学习笔记——最好的学习文档是官网

    官网:http://www.gulpjs.com.cn/docs/api/ 当然还有一个博客写的也很好,当我看不下去官网的时候,这个帮助了我很多,明了易懂:http://www.ydcss.com/a ...

  8. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

  9. gulp学习笔记2-安装

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

随机推荐

  1. M1/M2个人总结

    软件工程整个学期结束了,很开心学了这门课,在学到知识的同时也提高了自己的动手实践的能力,感觉自己在整个软件工程的各个环节中都能有所把握,可以将学到的知识运用到设计.实践更多的项目中去. M1阶段个人总 ...

  2. JS技术大全

    事件源对象:event.srcElement.tagName  event.srcElement.type 捕获/释放:event.srcElement.setCapture();  event.sr ...

  3. MFC-01-Chapter01:Hello,MFC---1.2 MFC简介

    1.2 MFC简介 MFC是Microsoft提供的放置Windows API的面向对象的包装的C++类库.MFC大约封装了好几百个类,其中有一些可以直接调用,有些类可以作为用户自己的类的基类.一些M ...

  4. 【转】Tomcat的默认访问路径

    放在外网的应用,用户多是直接输入域名访问,相信没有哪个后面还加个尾巴,而Tomcat的默认目录是ROOT,所以我们需要更改其默认目录. 更改Tomcat的默认目录很简单,只需要修改server.xml ...

  5. Cordova+ionic 开发hybird App --- 开发环境搭建

    Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...

  6. CSS之照片集效果

    代码: <!DOCTYPE html><html><head> <title>照片影集</title> <meta charset=& ...

  7. Dapper学习笔记(3)-增、删、改、查

    一.建表 在数据库中建立如下三张表: CREATE TABLE [dbo].[T_User] ( , ) PRIMARY KEY NOT NULL, ) NOT NULL, ) NULL, ) NUL ...

  8. thymeleaf的常见用法

    1,th:属性名="",就可以直接修改控件的属性,比如 <input th:type="button" th:name="xinxin" ...

  9. kafka 订单应用需求

    kafka的介绍就不说了,网上会找到一大堆. 为了公司做报表需要对卡券订单的销售情况做总结,所以每次下单的时候都要给卡券活动模块传递一次消息,并把订单的信息发送给活动,活动做相应的数据操作,因为数据量 ...

  10. Apache Server Status主机状态查看

    10月30日,国外安全研究人员发现由于对apache设置不严,导致服务器状态暴露于公网.本来apache有一个叫server-status 的功能,为方便管理员检查服务器运行状态的.它是一个HTML页 ...