前端构建工具Gulp使用

1.gulp安装

首先确保已经安装了nodejs开发环境，选择对应的版本进行下载http://nodejs.cn/download/

以全局方式安装gulp,执行命令

npm install -g gulp

把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install --save-dev gulp

(附:--save-dev是为了把安装gulp写进package.json，这个是为了方便下面使用例子中必须用到的)

2.gulp的使用

新建一个项目文件夹WebApp

打开命令行窗口，cd WebApp进入该文件夹

执行命令

npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-less gulp-sass gulp-load-plugins gulp-cssmin gulp-imagemin gulp-uglify open gulp-rev gulp-rev-collector

（这些都是gulp常用的插件）

在项目的当前位置新建一个gulpfile.js文件以及一个src文件夹，该文件夹为开发项目的总文件夹

在gulpfile.js文件夹下编辑该代码

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

var app = {
	scrPath:'src/',
	devPath:'build/',
	prdPath:'dist/'
};

gulp.task('html',function(){
	gulp.src(app.scrPath + '**/*.html')
	.pipe(gulp.dest(app.devPath))
	.pipe(gulp.dest(app.prdPath))
	.pipe($.connect.reload());
});

gulp.task('js',function(){
	gulp.src(app.scrPath + 'script/**/*.js')
	.pipe($.concat('index.js'))
	.pipe(gulp.dest(app.devPath +'js'))
	.pipe($.uglify())
	.pipe(gulp.dest(app.prdPath +'js'))
	.pipe($.connect.reload());
});

gulp.task('json',function(){
	gulp.src(app.scrPath + 'data/**/*.json')
	.pipe(gulp.dest(app.devPath + "data"))
	.pipe(gulp.dest(app.prdPath + "data"))
	.pipe($.connect.reload());
});

gulp.task('less',function(){
	gulp.src(app.scrPath + 'style/index.less')
	.pipe($.less())
	.pipe(gulp.dest(app.devPath +'css'))
	.pipe($.cssmin())
	.pipe(gulp.dest(app.prdPath +'css'))
	.pipe($.connect.reload());
});

gulp.task('sass',function(){
	gulp.src(app.scrPath + 'style/css.scss')
	.pipe($.sass())
	.pipe(gulp.dest(app.devPath +'css'))
	.pipe($.cssmin())
	.pipe(gulp.dest(app.prdPath +'css'))
	.pipe($.connect.reload());
});

gulp.task('image',function(){
	gulp.src(app.scrPath + 'image/**/*')
	.pipe(gulp.dest(app.devPath +'image'))
	.pipe($.imagemin())
	.pipe(gulp.dest(app.prdPath +'image'))
	.pipe($.connect.reload());
});

gulp.task('clean',function(){
	gulp.src([app.devPath,app.prdPath])
	.pipe($.clean());
});

gulp.task('build',['image','js','html','less','json']);

gulp.task('default',['build'],function(){

	gulp.watch(app.scrPath + '**/*.html',['html']);
	gulp.watch(app.scrPath + 'script/**/*.js',['js']);
	gulp.watch(app.scrPath + 'data/**/*.json',['json']);
	gulp.watch(app.scrPath + 'style/**/*.less',['less']);
	gulp.watch(app.scrPath + 'image/**/*',['image']);
});

接下来大概解释下代码的作用

引入gulp插件的作用

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

定义变量，第一个为开发环境下的代码，第二个为编译情况下，第三个为生产环境即正式发布

var app = {
	scrPath:'src/',
	devPath:'build/',
	prdPath:'dist/'
};

在src文件夹下新建index.html

	
	


	这是主页来的

执行gulp html

（发现项目文件下生成build、dist两个文件夹，同时里面也有index.html）这是由下面这段代码执行的

gulp.task('html',function(){
	gulp.src(app.scrPath + '**/*.html')//被编译的文件
	.pipe(gulp.dest(app.devPath))//编译后的文件
	.pipe(gulp.dest(app.prdPath))//生成环境的文件
	.pipe($.connect.reload());//负责代码修改后实时刷新
});

同理，下面接下是针对js，less，sass，image等文件的编译，多出几个编译sass或者压缩的方法，即可执行gulp js 或者gulp sass 编译对应的文件

执行gulp clean

你会发现生成的build、dist两个文件夹会被删除

执行gulp build 

将会批量执行，即编译所有数组里的文件

执行gulp default

将会实时刷新界面，更新代码