项目实例：jquery插件开发

我们来创建一个项目，用来管理自己的jquery插件库，我们可以快速创建插件模板，然后在这个模板框架下完善插件功能。同时提供一个build的任务，用来打包这个插件。

my_project
    |- plugins // 用于存放所有插件的目录
        |- my_plugin
            |- src
                |- js
                |- scss
                |- img
                |- ...
            |- dist
            |- README.md
        |- another_plugin
    |- gulp
    |- utils
    |- gulpfile.babel.js
    |- snippets // 模板，创建插件的时候自动将模板按照一定的规律部署到新插件中
    |- ...

1) 初始化一个项目

mkdir my_project
cd my_project
npm init

2) 安装gulp及相关模块

npm install -g gulp-cli
npm install --save-dev gulp
npm install --save-dev babel-core
npm install --save-dev babel-register
npm install --save-dev babel-preset-latest
vi .babelrc

.babelrc的内容：

{
  "presets": ["latest"]
}

3) 安装process.args

mkdir utils
git clone https://github.com/tangshuang/process.args.git utils/process.args

4) 创建gulpfile.babel.js

vi gulpfile.babel.js

文件内容：

var gulp = require('gulp');
var args = require('./utils/process.args')(true);

gulp.task('add',require('./gulp/task/add'));
gulp.task('build',require('./gulp/task/add'));

5) 创建添加插件处理

添加文件./gulp/task/add.js：

var args = require('./utils/process.args')(true);
var fs = require('fs');
var path = require('path');
var gulp = require('gulp');

module.exports = function(done) {
    // ...
};

6) 创建build任务

build有几件事要做：

• 转码、合并、压缩js
• 编译、合并、压缩css
• 处理图片

7) 开始工作

gulp add --name="jquery.slide"
gulp build --name="jquery.slide"

具体请到我的github上获取这个项目的demo，在自己的电脑上运行试试看。

学习编程，一定要多动手，一旦你开始这一步，就学会了成长。