新增合图支持点击态

121595113 · Sep 23, 2016 · 6feef17 · 6feef17
1 parent cf46ee6
commit 6feef17
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 15 deletions.
diff --git a/build/app/css/style.css b/build/app/css/style.css
diff --git a/build/app/images/cur-sprite.png b/build/app/images/cur-sprite.png
diff --git a/build/app/images/cur/lv7-hover.png b/build/app/images/cur/lv7-hover.png
diff --git a/build/app/index.html b/build/app/index.html
@@ -11,7 +11,20 @@
 </head>
 <body>
   <div class="wrapper">
-    <h1>呵呵，我是app!8from index.json</h1>
+    <h1>我是一个认真的demo</h1>
+    <h2>我认真起来是个demo--from index.json</h2>
+    <p>单个图片的使用</p>
+    <div class="div1"></div>
+    <p>多个图片的使用</p>
+    <ul class="clearfix">
+      <li class="demo__lv2"></li>
+      <li class="demo__lv3"></li>
+      <li class="demo__lv4"></li>
+      <li class="demo__lv5"></li>
+      <li class="demo__lv6"></li>
+      <li class="demo__lv7"></li>
+    </ul>
+    <div class="div2">我是不是很黄</div>
   </div>
   <script src="./js/index.js"></script>
 </body></html>
diff --git a/gulp/tasks/development/sprites.js b/gulp/tasks/development/sprites.js
@@ -30,16 +30,7 @@ gulp.task('sprites', () => {
                     padding: 4,
                     algorithm: sprite_arg.layout,
                     cssOpts: {
-                        dir_name: item,
-                        // cssSelector: function(item) {
-                        //     // If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')
-                        //     if (item.name.indexOf('-hover') !== -1) {
-                        //         return '.icon-' + item.name.replace('-hover', ':hover');
-                        //         // Otherwise, use the name as the selector (e.g. 'home' -> 'home')
-                        //     } else {
-                        //         return '.icon-' + item.name;
-                        //     }
-                        // }
+                        dir_name: item
                     },
                     cssTemplate: path.resolve('./gulp/lib/handlebarsInheritance.scss.handlebars'),
                     imgName: `${item}-sprite.png`,
@@ -50,6 +41,7 @@ gulp.task('sprites', () => {
                 .pipe(gulp.dest(config.dest.image));
 
             imgStreams[item].css
+                .pipe($.replace(/('\b.*)-(active|hover')/g, '$1:$2'))
                 .pipe(gulp.dest(config.dest.css));
         });
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gulp-T",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "gulp 综合应用",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,7 @@
     "gulp-notify": "^2.2.0",
     "gulp-plumber": "^1.1.0",
     "gulp-pug": "^3.0.3",
+    "gulp-replace": "^0.5.4",
     "gulp-sass": "^2.3.2",
     "gulp-sequence": "^0.4.6",
     "gulp-sourcemaps": "^1.6.0",

diff --git a/src/app/images/cur-sprite.png b/src/app/images/cur-sprite.png
diff --git a/src/app/images/cur/lv7-active.png b/src/app/images/cur/lv7-active.png
diff --git a/src/app/images/cur/lv7-hover.png b/src/app/images/cur/lv7-hover.png
diff --git a/src/app/sass/sprites/_cur.scss b/src/app/sass/sprites/_cur.scss
@@ -16,8 +16,8 @@ $cur-lv3: (80px, 0px, -80px, 0px, 76px, 88px, 316px, 180px, '../images/cur-sprit
 $cur-lv4: (160px, 0px, -160px, 0px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv4', 'cur');
 $cur-lv5: (0px, 92px, 0px, -92px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv5', 'cur');
 $cur-lv6: (80px, 92px, -80px, -92px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv6', 'cur');
-$cur-lv7-hover: (160px, 92px, -160px, -92px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv7-hover', 'cur');
+$cur-lv7-active: (160px, 92px, -160px, -92px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv7:active', 'cur');
 $cur-lv7: (240px, 0px, -240px, 0px, 76px, 88px, 316px, 180px, '../images/cur-sprite.png', 'lv7', 'cur');
-$cur-sprites: ($cur-lv2, $cur-lv3, $cur-lv4, $cur-lv5, $cur-lv6, $cur-lv7-hover, $cur-lv7, );
+$cur-sprites: ($cur-lv2, $cur-lv3, $cur-lv4, $cur-lv5, $cur-lv6, $cur-lv7-active, $cur-lv7, );