前端编译

StavinLi · Jul 24, 2018 · 6d07a7a · 6d07a7a
1 parent 70bb537
commit 6d07a7a
Show file tree

Hide file tree

Showing 11 changed files with 2,958 additions and 2,934 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.vscode/launch.json
+.vscode
+node_modules
diff --git a/README.md b/README.md
@@ -1,15 +1,38 @@
-# the-subway-of-china
-中国地铁图
-
-
-###  项目介绍
-中国地铁图，支持多种浏览器。覆盖北上广多个城市。
-- 技术点
-    1. svg绘制
-    2. 调用svg-pan-zoom.js以及hammer.js缩放
-- 数据来源
-    1. 百度地图
-
-
-### 页面预览
-- [在线预览](https://stavinli.github.io/the-subway-of-china/dest/index.html) 点个赞吧！
+#### the-subway-of-china
+中国地铁图
+
+
+##### 项目介绍
+中国地铁图，支持PC、移动端多种浏览器。覆盖北上广多个城市。
+- 技术点
+    1. svg绘制
+    2. 调用svg-pan-zoom.js以及hammer.js缩放
+    3. gulp文件打包
+
+- 数据来源
+    1. 百度地图
+
+##### 项目运行
+- 环境依赖
+    1. node v6.10.2
+
+- 部署步骤
+    1. npm install  //安装node运行环境
+    2. gulp    //前端编译
+
+##### 目录结构描述
+```
+├── Readme.md                   //help
+├── dest                        //发布包
+│   ├── css
+│   ├── js                
+│   └── *.html        
+├── libs                        //第三方文件
+├── node_modules                  
+├── rev                         //静态版本json
+├── src                         //开发包
+└── gulpfile.js
+```
+
+##### 页面预览
+- [在线预览](https://stavinli.github.io/the-subway-of-china/dest/index.html) 点个赞吧！
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,80 +1,80 @@
-var gulp = require('gulp'),
-    autoprefixer = require('gulp-autoprefixer'), // 处理css中浏览器兼容的前缀  
-    babel = require("gulp-babel"), //转码
-    runSequence = require('gulp-sequence'), //任务顺序'
-    cssmin = require('gulp-clean-css'), //压缩css
-    jsmin = require('gulp-uglify'), //压缩js
-    stripDebug = require('gulp-strip-debug'), //去console.log
-    htmlmin = require('gulp-htmlmin'), //压缩html
-    base64 = require('gulp-base64'),
-    rev = require('gulp-rev'),
-    revCollector = require('gulp-rev-collector');
-gulp.task('css', function() {
-    return gulp.src('src/css/*.css')
-        .pipe(autoprefixer({
-            browsers: ['last 4 versions'],
-        }))
-        .pipe(base64({
-            extensions: ['jpg', 'png'],
-            maxImageSize: 20 * 1024, // bytes 
-            debug: true
-        }))
-        .pipe(cssmin({
-            advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
-            compatibility: 'ie8', //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
-            keepBreaks: false, //类型：Boolean 默认：false [是否保留换行]
-            keepSpecialComments: '*', //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
-            debug: true,
-            rebase: false
-        }, function(details) {
-            console.log(details.name + ': 原始-' + details.stats.originalSize + ',压缩后-' + details.stats.minifiedSize);
-        }))
-        .pipe(rev())
-        .pipe(gulp.dest('dest/css'))
-        .pipe(rev.manifest())
-        .pipe(gulp.dest('rev/css'))
-});
-
-gulp.task('js', function() {
-    return gulp.src('src/js/*.js')
-        .pipe(babel({
-            presets: ['es2015']
-        }))
-        .pipe(jsmin({
-            mangle: true, //类型：Boolean 默认：true 是否修改变量名
-            compress: true //类型：Boolean 默认：true 是否完全压缩
-        }))
-        .pipe(stripDebug())
-        .pipe(rev())
-        .pipe(gulp.dest('dest/js'))
-        .pipe(rev.manifest())
-        .pipe(gulp.dest('rev/js'))
-});
-
-
-gulp.task('html', function() {
-    return gulp.src(['rev/**/*.json', 'src/*.html'])
-        .pipe(revCollector({
-            replaceReved: true
-        }))
-        .pipe(htmlmin({
-            removeComments: true, //清除HTML注释
-            collapseWhitespace: true, //压缩HTML
-            collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
-            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
-            removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
-            removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
-            minifyJS: true, //压缩页面JS
-            minifyCSS: true //压缩页面CSS
-        }))
-        .pipe(gulp.dest('dest'));
-});
-
-//监控文件变化
-gulp.task('watch', function() {
-    gulp.watch(["src/css/*.css", "src/js/*.js"], ['default']);
-});
-
-gulp.task('default', function(cb) {
-    runSequence(['css', 'js'], 'html', 'watch')(cb);
+var gulp = require('gulp'),
+    autoprefixer = require('gulp-autoprefixer'), // 处理css中浏览器兼容的前缀  
+    babel = require("gulp-babel"), //转码
+    runSequence = require('gulp-sequence'), //任务顺序'
+    cssmin = require('gulp-clean-css'), //压缩css
+    jsmin = require('gulp-uglify'), //压缩js
+    stripDebug = require('gulp-strip-debug'), //去console.log
+    htmlmin = require('gulp-htmlmin'), //压缩html
+    base64 = require('gulp-base64'),
+    rev = require('gulp-rev'),
+    revCollector = require('gulp-rev-collector');
+gulp.task('css', function() {
+    return gulp.src('src/css/*.css')
+        .pipe(autoprefixer({
+            browsers: ['last 4 versions'],
+        }))
+        .pipe(base64({
+            extensions: ['jpg', 'png'],
+            maxImageSize: 20 * 1024, // bytes 
+            debug: true
+        }))
+        .pipe(cssmin({
+            advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
+            compatibility: 'ie8', //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
+            keepBreaks: false, //类型：Boolean 默认：false [是否保留换行]
+            keepSpecialComments: '*', //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
+            debug: true,
+            rebase: false
+        }, function(details) {
+            console.log(details.name + ': 原始-' + details.stats.originalSize + ',压缩后-' + details.stats.minifiedSize);
+        }))
+        .pipe(rev())
+        .pipe(gulp.dest('dest/css'))
+        .pipe(rev.manifest())
+        .pipe(gulp.dest('rev/css'))
+});
+
+gulp.task('js', function() {
+    return gulp.src('src/js/*.js')
+        .pipe(babel({
+            presets: ['es2015']
+        }))
+        .pipe(jsmin({
+            mangle: true, //类型：Boolean 默认：true 是否修改变量名
+            compress: true //类型：Boolean 默认：true 是否完全压缩
+        }))
+        .pipe(stripDebug())
+        .pipe(rev())
+        .pipe(gulp.dest('dest/js'))
+        .pipe(rev.manifest())
+        .pipe(gulp.dest('rev/js'))
+});
+
+
+gulp.task('html', function() {
+    return gulp.src(['rev/**/*.json', 'src/*.html'])
+        .pipe(revCollector({
+            replaceReved: true
+        }))
+        .pipe(htmlmin({
+            removeComments: true, //清除HTML注释
+            collapseWhitespace: true, //压缩HTML
+            collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
+            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
+            removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
+            removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
+            minifyJS: true, //压缩页面JS
+            minifyCSS: true //压缩页面CSS
+        }))
+        .pipe(gulp.dest('dest'));
+});
+
+//监控文件变化
+gulp.task('watch', function() {
+    gulp.watch(["src/css/*.css", "src/js/*.js"], ['default']);
+});
+
+gulp.task('default', function(cb) {
+    runSequence(['css', 'js'], 'html', 'watch')(cb);
 })
diff --git a/libs/hammer.min.js b/libs/hammer.min.js
diff --git a/libs/jquery.js b/libs/jquery.js