ipu手机站点，增加iscroll.js效果

.editorconfig

@@ -0,0 +1,18 @@
# http://editorconfig.org
# 拷贝自sui的配置文件，定义文本的格式
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.less]
indent_size = 2

.gitignore

@@ -0,0 +1,7 @@
/node_modules
/.settings
/.project
/demo/js/lib/ipu
/demo/css/ipu**
/dist
/demo/font/rat**

README.md

@@ -0,0 +1,291 @@
## gulp构建 ##
#### 下载工程 ####
git工程地址  http://114.215.100.48:3000/guohh/ui-base-sui.git
#### 环境安装 ####
gulp是node.js环境下的构建工具，所以要使用gulp,首先需要安装node.js，到node.js官网下载node.js，
windows版本node.js自带npm工具，且将安装路径添加环境变更，安装后可直接使用npm工具（命令行可成功执行npm）。
#### 安装构建的依赖库 ####
在工程目录下，执行npm install,npm工具根据package.json文件中配置安装对应的依懒库
#### 执行构建任务 ####
在命令行切换到工程目录，执行gulp（默认在当前目录，查找gulpfile.js, 执行default任务）。
也可以主动执行具体某个任务，如 gulp css，执行css任务，default会进行构建，启动一个http服务器，
通过地址htpp://ip:3000 访问demo目录下index.html文件
#### gulpfile.js文件说明 ####
```js
//  编译js文件，打包发布
//  编译css文件，打包发布
//  启动http服务，js，css监听
'use strict';
var $, gulp, browserSync;
gulp = require('gulp');
$ = require('gulp-load-plugins')(); //
browserSync = require('browser-sync').create(); //
var jsArray = [                 // js文件需要定义顺序，
    'src/js/ui.js',
    'src/js/intro.js',
    'src/js/util.js',
    'src/js/zepto-adapter.js',
    'src/js/device.js',
    'src/js/fastclick.js',
    'src/js/modal.js',
    'src/js/calendar.js',
    'src/js/picker.js',
    'src/js/datetime-picker.js',
    'src/js/iscroll.js',
    'src/js/scroller.js',
    'src/js/tabs.js',
    'src/js/fixed-tab.js',
    'src/js/pull-to-refresh-js-scroll.js',
    'src/js/pull-to-refresh.js',
    'src/js/infinite-scroll.js',
    'src/js/searchbar.js',
    'src/js/panels.js',
    'src/js/router.js',
    'src/js/last-position.js',
    'src/js/init.js',
    'src/js/scroll-fix.js',
    'src/js/swiper.js',
    'src/js/swiper-init.js',
    'src/js/photo-browser.js',
    'js/city-data.js',
    'js/city-picker.js'
];
// js文件清理
gulp.task('jsClean', function () {
    return gulp.src(['dist/js/'], {read: false})
        .pipe($.clean())
});
// css文件清理
gulp.task('cssClean', function () {
    return gulp.src(['dist/css/'], {read: false})
        .pipe($.clean())
});
// font文件清理
gulp.task('fontClean', function () {
    return gulp.src(['dist/font/'], {read: false})
        .pipe($.clean())
});
// 历史清理
gulp.task('clean', ['fontClean', 'jsClean', 'cssClean'], function (cb) {
    cb();
});
// js语法检查
gulp.task('lint', function () {
    return gulp.src('src/js/*')
        .pipe($.jshint())
        .pipe($.jshint.reporter('default'));
});
// js文件编译
gulp.task('js', function () {
    return gulp.src(jsArray)
        .pipe($.sourcemaps.init())
        .pipe($.concat('ui.js'))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
});
gulp.task('jsMinify', ['js'], function () {
    return gulp.src('dist/js/ui.js')
        .pipe($.sourcemaps.init())
        .pipe($.uglify())
        .pipe($.rename({'suffix': '.min'}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
});
// css文件编译
gulp.task('css', function () {
    return gulp.src(['src/less/ui.less'])
        .pipe($.plumber({
            errorHandler: function (err) {
                // 处理编译less错误提示  防止错误之后gulp任务直接中断
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .pipe($.autoprefixer({
            browsers: [
                'Android >= 4',
                'Chrome >= 40',
                'last 6 Firefox versions',
                'iOS >= 6',
                'Safari >= 6']
        }))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'));
});
gulp.task('cssMinify', ['css'], function () {
    return gulp.src('dist/css/ui.css')
        .pipe($.sourcemaps.init())
        .pipe($.cssnano())
        .pipe($.rename({'suffix': '.min'}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'));
});
// font图标字体拷贝
gulp.task('font', function () {
    return gulp.src('src/fonts/*')
        .pipe(gulp.dest('dist/font'))
});
// 文件变化监听，更新编译文件
gulp.task('watch', function () {
    gulp.watch(['src/js/*'], ['jsMinify']);
    gulp.watch(['src/fonts/*'], ['font']);
    gulp.watch(['src/less/*'], ['cssMinify']);
});
// 静态服务器， 自动监听文件变化，更新页面
gulp.task('server', ['watch'], function () {
    browserSync.init({
        server: {
            baseDir: ["demo", "dist"],
        },
        open: false,    // 不自动打开浏览器
        port: 3000      // default port
    });
    return gulp.watch(["./demo/**", "./dist/**"])// 监听文件变化，刷新浏览器
        .on("change", browserSync.reload);
});
// build
gulp.task('build', ['clean'], function (cb) {
    $.sequence(['font', 'cssMinify', 'jsMinify'], cb);
});
// default server
gulp.task('default', function (cb) {
    $.sequence(['build'], ['server'], cb);
});
```
#### 代码介绍 ####
```js
require(xx)
```
用来引用其它js文件，或其它库（node_modules目录下的），其它都是普通js语法
```js
gulp.task('taskname',[deptask1, deptask2,..], function(){
    //task script
})
```
gulp任务定义的一般格式
taskname任务名称，
[deptask1, deptask2,..]可选参数，定义此任务的依赖任务
function(){..} 定义任务脚本
#### 库说明（在package.json文件查看到） ####
```
    "browser-sync": "^2.13.0",      // 浏览器刷新
    "gulp": "^3.9.1",               // gulp插件
    "gulp-autoprefixer": "^3.1.0",  // 自动为css代码添加浏览器前缀
    "gulp-clean": "^0.3.2",         // 文件删除
    "gulp-concat": "^2.6.0",        // 文件合并
    "gulp-cssnano": "^2.1.2",       // css文件压缩
    "gulp-jshint": "^2.0.1",        // js文件静态语法错误检查
    "gulp-less": "^3.1.0",          // less文件编译成css
    "gulp-load-plugins": "^1.2.4",  // gulp插件，减少加载文件代码
    "gulp-plumber": "^1.1.0",       // 处理less编译错误，导致watch任务中断
    "gulp-rename": "^1.2.2",        // 文件重命名
    "gulp-sequence": "^0.4.5",      // 设置文件执行顺序（gulp多个依赖任务间执行默认为并行）
    "gulp-sourcemaps": "^1.6.0",    // 生成文件映射，在合并和编译压缩时，通过文件映射文件找到原代码位置
    "gulp-uglify": "^1.5.4",        // js文件压缩
    "gulp-util": "^3.0.7",          // gulp工具类，可用来输出日志信息
```
大部分插件使用都比较简单，默认配置即可，有特殊要求时，可查看插件介绍了解相关配置
#### gulp补充 ####
一些未涉及的任务，如图片压缩，js单元测试，js代码风格检查，
还有js代码检查涉及很多配置，未进行详细了解
#### gulp的坑：任务顺序 ####
你的任务是否在这些前置依赖的任务完成之前运行了？
请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：
使用一个 callback，或者返回一个 promise 或 stream。
如果不是这样返回，会导致任务和依赖任务一起并行执行的情况
callback的方式，task方法最一个函数传入一个函数参数cb，在任务完成后，调用这个cb表示这个任务执行完毕
```js
// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});
```
stream  gulp.src或gulp.dest,gulp.pipe目前的返回应该就是stream
```js
gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});
```
promise
```js
var Q = require('q');
gulp.task('somename', function() {
  var deferred = Q.defer();
  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});
```
多个依赖任务执行顺序
看网上介绍4.0，gulp有对任务顺序进行处理了，不过现在版本还是不方便，依赖的多个任务之间没有
明确执行顺序
可以使用gulp-sequence, 处理，其可接收多个参数，将有顺序依赖的任务放到不同数组中
```js
gulp.task('default', function (cb) {
    $.sequence(['build'], ['server'], cb);
});
```
#### gulp的坑：任务错误处理 ####
有时因为脚本配置的因素，文件路径写错了导致文件未真正打包，但任务不会报错执行成功
使用gulp.watch时，如触发的任务执行失败，会导致watch不再触发
    例如，监听less文件变更时，执行编任务，若编译失败，监听程序好像就退出了，文件再变动时，
不会再触发编译任务，使用gulp-plumber可处理此问题，具体见css任务脚本
若监听文件被删除，也会出现上面问题，暂未找到解决方案，还是库的问题
// zepto.js 下自官网http://zeptojs.com/，版本v1.2.0
// require.js

gulpfile.js

@@ -0,0 +1,189 @@
//  编译js文件，打包发布
//  编译css文件，打包发布
//  启动http服务，js，css监听
'use strict';
var $, gulp, browserSync;
gulp = require('gulp');
$ = require('gulp-load-plugins')();
browserSync = require('browser-sync').create();
// js定义文件顺序
var jsArray = [
];
// js文件清理
gulp.task('jsClean', function () {
    return gulp.src(['dist/js/'], {read: false})
        .pipe($.clean())
});
// css文件清理
gulp.task('cssClean', function () {
    return gulp.src(['dist/css/'], {read: false})
        .pipe($.clean())
});
// font文件清理
gulp.task('fontClean', function () {
    return gulp.src(['dist/font/'], {read: false})
        .pipe($.clean())
});
// 历史清理
gulp.task('clean', ['fontClean', 'jsClean', 'cssClean'], function (cb) {
    cb();
});
// js语法检查
gulp.task('lint', function () {
    return gulp.src('src/js/*')
        .pipe($.jshint())
        .pipe($.jshint.reporter('default'));
});
// js文件编译
gulp.task('js', ['lint'], function () {
    return gulp.src('src/js/*')
        .pipe($.sourcemaps.init())
       //.pipe($.concat('ui.js'))
        //.pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
        .pipe(gulp.dest('demo/js/lib/ipu/'));
});
gulp.task('jsMinify', ['js'], function () {
    return ;// 暂无必要
    return gulp.src(['dist/js/*.js', '!dist/js/*.min.js'])
        .pipe($.sourcemaps.init())
        .pipe($.uglify())
        .pipe($.rename({'suffix': '.min'}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
});
// css文件编译
gulp.task('css', function () {
    return gulp.src(['src/less/ipu.less'])
        .pipe($.plumber({
            errorHandler: function (err) {
                // 处理编译less错误提示  防止错误之后gulp任务直接中断
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .pipe($.autoprefixer({
            browsers: [
                'Android >= 4',
                'Chrome >= 40',
                'last 6 Firefox versions',
                'iOS >= 6',
                'Safari >= 6']
        }))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(gulp.dest('demo/css'));
});
gulp.task('cssCompile', function () {
    return gulp.src(['src/less/*.less'])
        .pipe($.plumber({
            errorHandler: function (err) {
                // 处理编译less错误提示  防止错误之后gulp任务直接中断
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .pipe($.autoprefixer({
            browsers: [
                'Android >= 2.3',
                'Chrome >= 40',
                'last 6 Firefox versions',
                'iOS >= 6',
                'Safari >= 6']
        }))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(gulp.dest('demo/css'));
});
gulp.task('cssMinify', ['css'], function () {
    return gulp.src('dist/css/ipu.css')
        .pipe($.sourcemaps.init())
        .pipe($.cssnano())
        .pipe($.rename({'suffix': '.min'}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(gulp.dest('demo/css'));
});
// font图标字体拷贝
gulp.task('font', function () {
    return gulp.src('src/font/*')
        .pipe(gulp.dest('dist/font'))
        .pipe(gulp.dest('demo/font'))
});
// demo html文件编译
gulp.task('demo', function(){
    return gulp.src('src/html/**/*.*');
    /*
        .pipe($.injectString.replace('ipu-', 'ipu-'))
        .pipe(gulp.dest('./test'));
    gulp.watch("dist/css/**").on("change", function(){
    }).on("add", function(){
    });
     */
});
// 文件变化监听，更新编译文件
gulp.task('watch', function () {
    gulp.watch(['src/fonts/*'], ['font']);
    gulp.watch(['src/less/**'], ['cssMinify']);
    //gulp.watch(['src/js/*'], ['jsMinify']);
    // js单个文件拷贝
    gulp.watch(['src/js/*'], function(e){
        console.log(e);
        gulp.src(e.path)
            .pipe(gulp.dest('dist/js'))
            .pipe(gulp.dest('demo/js/lib/ipu/'));
    });
    // html单个文件拷贝
    gulp.watch(['demo/src/**.html'],function(e){
        console.log(e);
        gulp.src(e.path)
        .pipe($.injectString.replace('ipu-', 'ipu-'))
        .pipe(gulp.dest('demo'));
    });
});
// 静态服务器， 自动监听文件变化，更新页面
gulp.task('server', ['watch'], function () {
    browserSync.init({
        server: {
            baseDir: ["demo"],
        },
        open: false,    // 不自动打开浏览器
        port: 3000      // default port
    });
    return gulp.watch(["./demo/**"])// 监听文件变化，刷新浏览器
        .on("change", browserSync.reload);
});
// build
gulp.task('build', ['clean'], function (cb) {
    $.sequence(['font', 'cssMinify', 'js'], cb);
});
// default server
gulp.task('default', function (cb) {
    $.sequence(['build'], ['server'], cb);
});

package.json

@@ -0,0 +1,32 @@
{
  "name": "frame",
  "version": "1.0.0",
  "description": "",
  "main": "gulp.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.2",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sequence": "^0.4.5",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.4",
    "gulp-util": "^3.0.7",
    "jshint": "^2.9.3"
  },
  "dependencies": {
    "gulp-inject-string": "^1.1.0"
  }
}