Gulp基础
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 [任务名称]
更多细节知识请自行学习。
参考文章:
https://segmentfault.com/a/1190000000372547
http://www.ydcss.com/archives/18
Gulp基础的更多相关文章
- gulp基础操作实践
		按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ... 
- gulp基础使用总结
		gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ... 
- gulp 基础运用
		全局安装gulp $npm install --global gulp 作为项目的开发依赖安装 //--save-dev 开发依赖,储存在package.json的devDependencies中,如 ... 
- Gulp基础知识
		首先,我们需要了解Gulp能做些什么? 编译 sass sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ... 
- gulp.基础
		1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js ... 
- gulp基础使用及进阶
		提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ... 
- 【gulp】工作中的实战
		写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ... 
- Gulp真实项目用例
		包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ... 
- gulp学习-gulpfile
		安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ... 
随机推荐
- Java 中一个过时的类,能够很好的统计单个字符串的次数
			//StringTokenizer st1=new StringTokenizer("rirtirtjdlkfjlksadfoiyetryetretrejtlkjdsflkiuetuiojr ... 
- Spring, MyBatis 多数据源的配置和管理
			同一个项目有时会涉及到多个数据库,也就是多数据源.多数据源又可以分为两种情况: 1)两个或多个数据库没有相关性,各自独立,其实这种可以作为两个项目来开发.比如在游戏开发中一个数据库是平台数据库,其它还 ... 
- easyUI的基础布局easyui-accordion
			---恢复内容开始--- <html> <head> <meta charset="UTF-8"> <title>树状图</t ... 
- WPF DevExpress 设置雷达图Radar样式
			DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ... 
- vi(vim)键盘图及其基本命令
			进入vi vi filename 打开或新建文件,并将光标置于第一行首 vi +n filename 打开文件,并将光标置于第 n行首 vi + fi ... 
- 安装ArcGIS Desktop 9.3
			本文仅用于学习交流,商业用途请支持正版!转载请注明: http://www.cnblogs.com/mxbs/p/6216865.html 准备: ArcGIS Desktop 9.3.crack_f ... 
- 解决 node-gyp command not found 的问题
			node-gyp明明已经安装了,但是不能执行,显示命令找不到,然后重装之,发现npm有一个提示信息: npm WARN prefer global node-gyp@3.4.0 should be i ... 
- .NET MVC实现多图片上传并附带参数(ajaxfileupload)
			做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ... 
- Java的基本数据类型与转换
			1.1 Java为什么需要保留基本数据类型 http://www.importnew.com/11915.html 基本数据类型对大多数业务相关或网络应用程序没有太大的用处,这些应用一般是采用客户端/ ... 
- 20170103简单解析MySQL查询优化器工作原理
			转自博客http://www.cnblogs.com/hellohell/p/5718238.html 感谢楼主的贡献 查询优化器的任务是发现执行SQL查询的最佳方案.大多数查询优化器,包括MySQL ... 
