优化清除注释代码支持sass，less

sunft1996 · May 22, 2020 · ed19421 · ed19421
1 parent a1f4b0c
commit ed19421
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 31 deletions.
diff --git a/README.CN.md b/README.CN.md
@@ -1,42 +1,68 @@
-<!--
- * @Descripttion: 
- * @Author: sunft
- * @Date: 2020-05-22 13:55:05
- * @LastEditTime: 2020-05-22 13:55:41
---> 
 <h1 align="center">sprite-smith-loader</h1>
 
 
 ![image](https://img.shields.io/badge/license-MIT-green)
 ![image](https://img.shields.io/badge/webpack-%5E4.0.0-blue)
 ## 介绍
 sprite-smith-loader是一款自动生成雪碧图工具，你可以在webpack中使用它，它会自动生成雪碧图并修改相应的css代码。
+
+支持**CSS**、**SASS**、**LESS**。
 ## 安装
 下载sprite-smith-loader
 
 ```
 npm install --save-dev sprite-smith-loader
 ```
 ## 配置
-将loader添加到webpack的配置中，必须放在css-loader之后
+将loader添加到webpack的配置中，必须放在css-loader之后，别忘了添加file-loader或url-loader处理图片路径。
 
 **webpack.config.js**
 
 ```
 module.exports = {
   module: {
     rules: [
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader','sprite-smith-loader'],
-      },
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+            options: {
+                outputPath: 'images',
+            },
+        },
+        {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader','sprite-smith-loader'],
+        }
+    ],
+  },
+};
+```
+配合SASS
+
+```
+module.exports = {
+  module: {
+    rules: [
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+            options: {
+                outputPath: 'images',
+            },
+        },
+        {
+            test: /\.(sass|scss|css)/,
+            use: ['style-loader', 'css-loader','sprite-smith-loader',"sass-loader"],
+        }
     ],
   },
 };
+
 ```
 
+
 ## 使用
-修改你的css文件
+修改你的 CSS/SCSS/SASS/LESS 文件
 
 ```
 .my_bg_1{

diff --git a/README.md b/README.md
@@ -1,9 +1,3 @@
-<!--
- * @Descripttion: 
- * @Author: sunft
- * @Date: 2020-05-22 13:54:30
- * @LastEditTime: 2020-05-22 13:57:44
---> 
 <h1 align="center">sprite-smith-loader</h1>
 
 
@@ -13,31 +7,64 @@
 :rocket: [中文文档点这里](https://github.com/sunft1996/sprite-smith-loader/blob/master/README.CN.md/)
 ## Introduce
 Sprite Smith loader is a tool for automatically generating CSS Sprites. You can use it in webpack. It will automatically generate CSS Sprites and modify the corresponding CSS code.
+
+supports **CSS**、**SASS**、**LESS**.
 ## Getting Started
 To begin, you'll need to install sprite-smith-loader:
 
 ```
-npm install --save-dev css-loader
+npm install --save-dev sprite-smith-loader
 ```
-Then add the plugin to your webpack config. For example:
+Then add the plugin to your webpack config. And don't forget to add the file-loader or url-loader. 
+
+For example:
 
 **webpack.config.js**
 
 ```
 module.exports = {
   module: {
     rules: [
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader','sprite-smith-loader'],
-      },
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+            options: {
+                outputPath: 'images',
+            },
+        },
+        {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader','sprite-smith-loader'],
+        },
+    ],
+  },
+};
+```
+with SaSS 
+
+```
+module.exports = {
+  module: {
+    rules: [
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+            options: {
+                outputPath: 'images',
+            },
+        },
+        {
+            test: /\.(sass|scss|css)/,
+            use: ['style-loader', 'css-loader','sprite-smith-loader',"sass-loader"],
+        }
     ],
   },
 };
+
 ```
 
 ## Usage
-Modify your CSS file
+Modify your CSS/SCSS/SASS/LESS file
 ```
 .my_bg_1{
     height: 100px;

diff --git a/demo/loaders/sprite-smith-loader.js b/demo/loaders/sprite-smith-loader.js
@@ -8,9 +8,9 @@ module.exports = function (source) {
 
     let outputName = new Date().getTime() + '_smith.png';
     // 清除css中的注释
-    const cleanSource = source.replace(/\/\*[\w\W]*\*\//g, '')
-
+    const cleanSource = source.replace(/(\/\*.*\*\/)|\/\/.*/g, '')
     let imgs = cleanSource.match(/url\(.+_sprite.+\)/g);
+    if(!imgs) return cleanSource;
 
     const callback = this.async();
 

diff --git a/demo/resource/sprites/1590130839494_smith.png b/demo/resource/sprites/1590130839494_smith.png
diff --git a/demo/resource/sprites/1590130873790_smith.png b/demo/resource/sprites/1590130873790_smith.png
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -2,7 +2,7 @@
  * @Descripttion: 
  * @Author: sunft
  * @Date: 2020-03-24 11:19:44
- * @LastEditTime: 2020-05-22 14:58:48
+ * @LastEditTime: 2020-05-22 18:12:59
  */
 const path = require("path");
 const webpack = require("webpack");

diff --git a/dist/index.js b/dist/index.js
@@ -8,9 +8,9 @@ module.exports = function (source) {
 
     let outputName = new Date().getTime() + '_smith.png';
     // 清除css中的注释
-    const cleanSource = source.replace(/\/\*[\w\W]*\*\//g, '')
-
+    const cleanSource = source.replace(/(\/\*.*\*\/)|\/\/.*/g, '')
     let imgs = cleanSource.match(/url\(.+_sprite.+\)/g);
+    if(!imgs) return cleanSource;
 
     const callback = this.async();
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sprite-smith-loader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "sunft",
   "description": "css sprites loader for webpack",
   "main": "dist/index.js",