gulp常用插件在项目中的使用(windows下操作)分析

在选择构建工具时很多人都会选择使用gulp，相对于webpack和grunt，gulp是比较容易入门的。下面为大家详细讲解一下在实际开发项目中是如何使用gulp构建工具的。

准备工作（若已安装可忽略，直接看详解步骤）

1、安装node.js(npm)

gulp的安装依赖node.js的npm，所以需要先安装node.js，下载后直接安装即可，目前新版本的node都是集成了npm的。如下图则是已经安装好。

2、安装git

在实际开发项目中git是必不可少的，方便我们下载一些必须的包。直接官网下载即可，可能下载会比较慢，可以通过此链接下载。

下面开始gulp的详解

1、全局安装gulp

安装后可查看是否安装成功，若成功会显示版本，如下图，若未成功则需要配置一下node。

npm install --global gulp

2、在项目下初始化一下npm(我是新建了一个名为test的文件夹)

在test文件夹下，使用git初始化npm。会出现一些提示，直接Enter确认就可以。

这样在我们的test文件夹下就生成了一个package.json文件。

3、在test项目下作为开发依赖安装gulp

就像我的项目名称为test，需要在test下作为开发依赖安装一遍gulp。(以下命令均在git中执行)

//--save-dev是作为开发依赖  --save是作为发布后的依赖
$ npm install  --save-dev gulp

局部安装后，在test下回生成node_modules文件夹，你的gulp包都在里面可以不用管他。打开package.json可以看到，gulp已经作为开发以来被添加进配置里。

3、安装项目所需要插件(在这里我们需要9个插件)

直接npm作为开发依赖安装即可，可以单独安装，也可以像我这样9个一起安装空格隔开即可。

所需的插件

4、开始构建，手动创建gulpfile.js文件

在test文件夹下手动创建gulpfile.js文件，创建好以后我们就要开始配置内容了。

5、在gulpfile.js下操作各类文件，步骤如下

(1) 首先获取到我们安装的gulp插件

var gulp = require('gulp');
//加载各类gulp插件
var $ = require('gulp-load-plugins')();
var open = require('open');

(2)我们先构建一下必须的包，以jQuery.js为例

我们新建一个文件夹命名为components，将jQuery的包放进去（可直接复制过去，建议使用npm或者bower进行安装）。

接下来我们来构建以下jquery。

var app = {
    srcPath: 'src/',
    devPath: 'build/',//开发目录
    prdPath: 'dist/' //生产目录
};

//操作包文件
gulp.task('lib', function () {
    //操作components下所有的js文件
    gulp.src('components/**/*.js')
        //在build下创建vendor文件夹，并将包构建进去
        .pipe(gulp.dest(app.devPath + 'vendor'))
        //在dist下创建vendor文件夹，并将包构建进去
        .pipe(gulp.dest(app.prdPath + 'vendor'))
        //通知浏览器自动刷新更改 低级浏览器不支持
        .pipe($.connect.reload());
});

在git下执行

$ gulp lib 

成功后会生成build 和 dist文件夹，并且在它们下面各有一个被构建进去的jquery.js文件夹vendor。

(3)构建一下html文件

新建src文件夹，并创建一个index.html文件，在src下新建view文件夹，创建1.html和2.html

//操作html文件
gulp.task('html', function () {
    //操作src下所有的html文件
    gulp.src('src/**/*.html')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.connect.reload());
});

直接git下操作

$ gulp html

可以看到在build和dist文件夹下都生成了相应的html文件。

(4)构建json文件(实际开发中直接从后台传过来数据，我们这里使用的json只是一些假数据)

在src下新建data文件夹，可以创建一个1.json进行测试。

//操作json文件
gulp.task('json', function () {
    gulp.src('src/**/*.json')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.connect.reload());
});

$ gulp json

在build和dist下分别生成相应的json文件

(5)构建less(CSS)文件

在src下创建style文件夹，新建index.less(或者css),再新建一个1.less和2.less，敲入一些测试数据。同时将1.less和2.less引入到index.less中

实际开发中我们只生成一个样式文件，并且会进行压缩。

//操作less(css)
gulp.task('less', function () {
    //操作主样式文件
    gulp.src('src/style/index.less')
        //解析less文件
        .pipe($.less())
        //在build中生成css文件夹用来存放index.css
        .pipe(gulp.dest(app.devPath + 'css'))
        //压缩css文件
        .pipe($.cssmin())
        //在build中生成css文件夹用来存放压缩后的index.css
        .pipe(gulp.dest(app.prdPath + 'css'))
        .pipe($.connect.reload());
});

$ gulp less

我们可以看到我们的dist下的css中生成的index.css是压缩过的。

(6)构建js文件

在src下新建script文件夹，并在script下新建index.js ，在新建一个1.js和2.js，写入一些册书数据。

//操作js
gulp.task('js', function () {
    //对script下的所有js进行操作
    gulp.src(app.srcPath + 'script/**/*.js')
        //将这些js文件进行合并
        .pipe($.concat('index.js'))
        .pipe(gulp.dest(app.devPath + 'js'))
        //将这些js文件进行压缩
        .pipe($.uglify())
        .pipe(gulp.dest(app.prdPath + 'js'))
        .pipe($.connect.reload());
});

$ gulp js

两个文件夹下生成两个js文件夹，index.js是经过合并的，一个是压缩版，一个是未压缩版。

(7)构建图片文件

在src下创建image文件夹，放入一张图片

//操作图片
gulp.task('image', function () {
    gulp.src(app.srcPath + 'images/**/*')
        .pipe(gulp.dest(app.devPath + 'image'))
        //压缩图片
        .pipe($.imagemin())
        .pipe(gulp.dest(app.prdPath + 'image'))
        .pipe($.connect.reload());
});

$ gulp image

同上，生成的图片是经过压缩和未经过压缩的

(8)打包所有文件

对所有文件进行打包

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

$ gulp build

(9)清除目录

会将所有的目录清除掉……

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

$ gulp clean

(10)创建服务，自动刷新(很有用！！)

我们在开发时，配置好了这个服务，我们修改代码后，会直接自动刷新，并且自动打开网址。

//服务
gulp.task('serve', ['build'], function () {
    //连接服务
    $.connect.server({
        //root代表从哪个路径下开始读取 这里是从开发目录下开始读取
        root: [app.devPath],
        //开启后自动刷新浏览器 IE8以下暂不支持
        livereload: true,
        //定义端口
        port: 1234,
    });
    //默认打开浏览器
    open('https://localhost:1234');
    //监控文件 自动构建代码
    gulp.watch('bower_components/**/*', ['lib']);
    //监控的是src下的各类文件
    gulp.watch('src/**/*.html', ['html']);
    gulp.watch('src/data/**/*.json', ['json']);
    gulp.watch('src/style/**/*.less', ['less']);
    gulp.watch('src/script/**/*.js', ['js']);
    gulp.watch('src/images/**/*', ['image']);
});

$ gulp serve 

会直接打开你的index.htm页面，每次修改代码时会自动刷新！！

（11）执行默认服务

我们可以设置一下gulp的默认动作，这里我设置成serve,就是只要执行$gulp直接进入服务，打开页面。

//默认执行serve
gulp.task('default', ['serve']);

$ gulp