1.什么是gulp?

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。

2.为什么使用gulp?

gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,提高我们的工作效率。

3.gulp介绍?

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

在实现上,借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

4.基本使用?

a.安装node,npm会随着一并安装。node中文网:http://nodejs.cn/

b.安装完毕,确认安装成功:命令行运行node -v查看node版本;命令行运行npm -v查看npm版本;

c.选装cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org。确认安装成功,运行cnpm -v查看cnpm版本;

d.全局安装gulp:cnpm install gulp -g。确认安装成功,命令行运行gulp -v查看gulp版本;

e.定位到项目文件夹,将gulp安装到项目本地:cnpm install  gulp --save-dev

f.安装任务依赖,新建新建gulpfile文件。示例如下:

安装依赖(示例gulp-less):cnpm install gulp-less --save-dev

新建gulpfile.js文件:(一定是gulpfile这个名称)

var gulp = require('gulp'); 
var less = require('gulp-less');
gulp.task('less', function() {
gulp.src('./less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});

g.运行gulp任务:gulp [任务名称]

更多细节知识请自行学习。

参考文章:

http://www.gulpjs.com.cn/

https://segmentfault.com/a/1190000000372547

http://www.ydcss.com/archives/18

Gulp基础的更多相关文章

  1. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  2. gulp基础使用总结

    gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ...

  3. gulp 基础运用

    全局安装gulp $npm install --global gulp 作为项目的开发依赖安装 //--save-dev 开发依赖,储存在package.json的devDependencies中,如 ...

  4. Gulp基础知识

    首先,我们需要了解Gulp能做些什么? 编译 sass                                        sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...

  5. gulp.基础

    1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js ...

  6. gulp基础使用及进阶

    提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...

  7. 【gulp】工作中的实战

    写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...

  8. Gulp真实项目用例

    包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...

  9. gulp学习-gulpfile

    安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ...

随机推荐

  1. 用友NC开发的ListView切换成FormEdit

    在点击 “修改” 按钮或者双击ListView中某一项Item,将进入FormEdit即卡片界面,但是 FormEdit有两种状态,一种是 可编辑的状态(点修改按钮进入的状态),一种是非可编辑状态(双 ...

  2. ubuntu无限卡在logo界面

    ubuntu默认的是lightdm显示管理器,GDM就是Gnome display manager,lightdm是ubuntu开发的代替gdm的显示管理器.如果ubuntu进不去图形界面,除了重新安 ...

  3. 【Pyrosim案例】02:简单燃烧

    1 案例说明 本案例介绍一个简单的燃烧模拟. 本案例通过指定热释放率(Heat Release Rate,HRR)来定义一个500kW的燃烧火焰.利用热释放率来定义燃烧火焰在火灾安全工程中描述火焰的一 ...

  4. Practical oral English

    1.如果你继续发烧,我就去请医生过来If your fever continues, I'll send for the doctor.2.在这么大的停车场里,我是永远都找不到我的车的I'll nev ...

  5. 浅谈 C++ 中的 new/delete 和 new[]/delete[]

    在 C++ 中,你也许经常使用 new 和 delete 来动态申请和释放内存,但你可曾想过以下问题呢? new 和 delete 是函数吗? new [] 和 delete [] 又是什么?什么时候 ...

  6. SVM一点心得体会

    支持向量机的学习说是刚刚开始,又不合理,只能说隔了很长的时间再看,终于在分类这块的层面上有了新的认识. 总的来说,支持向量机分为线性支持向量机和非线性支持向量机,线性支持向量机又可以分为硬间隔最大化线 ...

  7. Centos6下安装高版本Git

    yum remove git .tar.gz /usr/src/ cd /usr/src/ cd git-/ make configure whereis autoconf yum install a ...

  8. [LeetCode] Strobogrammatic Number 对称数

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  9. Kinect for Windows SDK开发入门(十九):Kinect Fusion

        Kinect for Windows SDK1.7中引入了Kinect Fusion功能.在1.8的SDK中对该功能进行了改进和强化,Kinect Fusion能够使得我们使用Kinect f ...

  10. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...