gulp 入门教程

安装gulp

在安装gulp之前你需要安装Node.js。
如果你还没有安装Node,你可以在这里下载。
安装完Node.js,使用Terminal(终端，win下是cmd)用下面命令安装Gulp

1	$ sudo npm install gulp -g

创建gulp项目

cd gulp 进入项目

npm init

然后会产生一个package.json文件这里不需要改动

下一步

1	npm install gulp gulp-sass gulp-jade --save

执行完之后，gulp将创建node_modules文件夹，里面有个gulp文件夹。

然后下载配置文件

1
2
3

npm install gulp-watch
npm install gulp-clean-css
npm install gulp-uglify

手动新建gulpfile.js
然后配置gulpfile.js文件

var jade=require("gulp-jade");
var sass=require("gulp-sass");
var watch=require("gulp-watch");
var gulp=require("gulp");
var cleancss=require("gulp-clean-css");
var miniJS=require("gulp-uglify");
gulp.task("default",["watch"],function(){
})
gulp.task("date",function(){
	gulp.src("jade/*.jade")
	.pipe(jade({
		pretty:true
	}))
	.pipe(gulp.dest("html/"))
})
gulp.task("sass",function(){
	gulp.src("sass/*.scss")
	.pipe(sass({
		pretty:true
	}))
	.pipe(gulp.dest("css/"))
})
gulp.task("watch",function(){
	gulp.watch("jade/*.jade",["date"])
	gulp.watch("sass/*.scss",["sass"])
})

新建jade sass html css 文件夹

最后cd 项目 gulp运行一下就ok啦！

最后的效果是这样的

Alt text

2015-09-30