第一步:安装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. linux命令每日一练习 显示一个文件的制定行---查看命令帮助信息

    sed -n '11,12p' ××× cat ***|tail -n +12|head -n 2 tail -n +5 显示末尾五行 查看一个命令的帮助 详细的 man *** 简略的 *** -- ...

  2. android studio 中依赖库compile 的一些库的地址

    1.添加Gson的依赖库 compile 'com.google.code.gson:gson:2.2.4' 2.使用Volley执行网络数据传输的依赖库 compile 'com.mcxiaoke. ...

  3. 用Advanced Installer制作DotNetBar for Windows Forms 12.0.0.1_冰河之刃重打包版详解

    关于 DotNetBar for Windows Forms 12.0.0.1_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

  4. 作业七:团队项目——Alpha版本冲刺阶段009

    今日安排:组内成员讨论 今日进度:组内成员讨论分工细节以及可能遇到的问题,并提出解决方案

  5. 再读C++线程池

    最近仔细看了一下https://github.com/henkel/threadpool代码,总体感觉非常精巧,使用了 boost库的bind function完成了线程池与业务端的完全解耦:所有的任 ...

  6. html5/css学习笔记

    请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...

  7. GIS的发展

    2016年2月15日,博客园的blog申请成功了,这是我的第一篇随笔,发一个GIS的发展的视频链接 http://buluo.qq.com/p/detail.html?bid=15060&pi ...

  8. PHP 单引号 与双引号区别

    在PHP中,字符串的定义可以使用单引号,也可以使用双引号. PHP允许我们在双引号串中直接包含字串变量,双引号串中的变量将被解释而且替换,而单引号串中的内容总被认为是普通字符.例如: $foo = 2 ...

  9. SWFUpload - JQuery上传插件

    首先,大家可以去SWF的官网下载相关Demo或者源码. 官方地址:http://code.google.com/p/swfupload/ 官方Demo:http://demo.swfupload.or ...

  10. SQL.集合转字符串

    场景:有个表,里面有NUM1,NUM2,NUM3,NUM4,我们打算把所有数据拼接成一个值. 在.net中使用的方法应该是两层for循环拼接起来,下面来介绍下sql中的方式 第一种方法,动态sql d ...