前端构建工具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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>主页</title></head><body>这是主页来的</body></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

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

秒客网