PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下:

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer');
  ]
}

package.json内增加如下示例

"browserslist": [
  "> 1%",
  "last 2 versions"
]

这里我对着官方文档简单说一下数组内的值对应的含义:

  • last 2 versions: 每个浏览器中最新的两个版本。
  • > 5% or >= 5%: 全球浏览器使用率大于5%或大于等于5%(上例中则是1%)。

其他的一些参数简单介绍:

  • ie 6-8: 选择包含ie6-8的版本。
  • Firefox > 20: 火狐版本号大于20。

还有很多不一一列举,这里的配置还是很详细的,一般来说最省事的就是不加参数,按照默认即可。

需要配置的话,就在package.json里面添加browserslist参数,这样其他插件也能够从中获取到项目将要兼容的版本,目前包含以下几个插件会读取改配置:

关于autoprefixer的介绍差不多就这些了~

postcss-partial-import

这个没啥好说的,也是很容易理解的插件,就是让你的css文件支持@import,支持W3C的写法也支持SASS那种写法,这里就不多说啦。

postcss-advanced-variables

同样的,像SASS那样可以自定义变量并进行引用,用法也十分简单,相信大家一定不用点开官方文档也会用的~(你肯定还是点开了哈哈哈~你这叫胡开链接综合症,生怕错过了啥内容。)

cssnano

很显然这个插件作者比较高调,github的cssnano上面是没有什么说明和介绍的,当然官方也写得很详细了。这个插件通俗来讲,就是css代码压缩工具,他的配置建议采用默认配置,除非你知道你在做什么。

当然我在测试使用中遇到了一点点问题,关于cssnano和autoprefixer结合使用,或者说是postcss.config.js插件引入顺序有关的造成输出不同的问题?我暂时还在研究,先看代码:

testcssnano.css

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

postcss.config.js(第一种)

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
    require('autoprefixer')
  ]
}

输出结果:

.test{border-radius:10px;display:flex}

postcss.config.js(第二种)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    })
  ]
}

输出结果:

.test{border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex}

问题一,如果手写-moz-,cssnano会清除,可见示例,当然或许这个属性在火狐已经支持不需前缀所以,就被去掉了。

问题二,如果在配置文件中,cssnano在autoprefixer之前引用,假设根据webpack的loader执行顺序规则相同的话,大概postcss.config.js中的插件也是这样由下而上依次执行,因此,在第一种例子中,css代码先被autoprefixer处理,然后再执行cssnano清除了那些多余的前缀代码?大致可分解为:

第一步autoprefixer处理结果:

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
}

第二步cssnano处理结果:

.test{border-radius:10px;display:flex}

可是我要遗憾的告诉大家。。。这个可能是错误的结论!!!

因为我将第一步的结果作为初始css,将postcss.config.js中仅引用一个cssnano插件来执行的结果如下:

.test{border-radius:10px;display:flex;display:-webkit-box;display:-ms-flexbox}

因此,这个问题就来了。。。cssnano确实将-moz-去掉,但是他并没有处理其他的关于display的兼容代码。

于是我再做了一个测试:

我将css代码改为:

.test {
  -webkit-transform: scale(.5) translate(10, 20);
  -moz-transform: scale(.5) translate(10, 20);
  -ms-transform: scale(.5) translate(10, 20);
  -o-transform: scale(.5) translate(10, 20);
  transform: scale(.5) translate(10, 20);
}

而postcss.config.js还是同时引入cssnano和autoprefixer,经过测试,无论谁先谁后输出结果均为:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

如果css代码改为:

.test {
  transform: scale(.5) translate(10, 20);
}

postcss.config.js同时引入cssnano和autoprefixer,

第一种cssnano在前结果:

.test{transform:scale(.5) translate(10,20)}

第二种autoprefixer在前结果:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

结果又不一样,不知道看到这里大家晕了没有。

根据观察,postcss.config.js的插件执行顺序是有要求的,至少在同时使用cssnano和autoprefixer的时候,cssnano一定要在autoprefixer之后,否则autoprefixer可能会失效!

另外cssnano和autoprefixer都会对很旧的兼容写法进行精简,例如上文有一段有很多个transform属性的css代码,autoprefixer会(根据browserslist)剔除其他的。

至于顺序问题,我后面继续进行研究!

postcss-px2rem

做移动端,适配是个头疼的问题,不过我目前还是使用想对稳定的方案flexible,那么就需要用rem来做主要的单位,这里不说适配问题只说这个插件,一般移动端,设计师给的设计稿都是750px宽,你只需要下面这样设置,就可以直接在代码里面写你在PSD量的像素值了,这真是太令人激动了!

require('postcss-px2rem')({
  remUnit: 75,
  threeVersion: true
})

因为这个postcss-px2rem又是来源于px2rem的,所以详细的说明见px2rem,我这里写了两个参数,一个remUnit,这个对应的是每rem对应的px值,既然750px,就写75啦,不知道这样理解对不对。另一个threeVersion则对应三个不同dpr下的大小,这个比较少用,需要注意的是处理这些参数,是否转换rem都和注释有关,这里就不细说了,看看文档就好~当然这里也埋下一个坑,等下会提到。

precss

这就是个大杂烩,主要是为了满足SASS开发者的习惯,继承了很多插件,本篇前后文都有提及precss内的部分插件,如果并不是全部用到,我建议还是一个个手动安装所需插件来进行配置,这东西,配好了以后也就不会经常改动了,而且个人认为用大杂烩很容易出现一些坑,又很难排查,例如下面两个插件,大家仔细看看。

另外还有几个插件,建议安装(当然如果你完全不知道干啥的可以忽略):

  1. postcss-mixins 一个和SASS的mixins用法相同的插件
  2. postcss-atroot 让你的嵌套css处于根部,官方有个bar.css的@import的例子很棒,可以看看举一反三
  3. postcss-extend 有相同结构却有那么一点点不同的区别,用这个可以方便的统一管理相同部分样式代码

其他的一些我个人觉得不常用或者说实用意义不大所以就没有写出来了。

postcss-nestingpostcss-nested

这两个也是从precss里面拿出来的,就是仿SASS的嵌套css写法用。为啥把这两个放一起写,因为他们长的太像了。只看名字鬼知道他们的区别,然而他们都被加入到precss里面去了。据precss介绍,他们两个的区别是:

光看这两行我是看不懂到底是个啥玩意,难道第一个是符合W3C规范的嵌套选择?粗略看了下两个插件的说明文档,没看出没啥区别。行,那手动写代码来一个个试试。先安装postcss-nesting,编译试试,哗嚓一片红。。。咋回事,我们先看看代码片段。

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

看似SASS写法没有任何问题。可是它提示的报错信息让人看不大懂

ERROR in ./src/style/index.css
Module build failed: ModuleBuildError: Module build failed: Error: undefined:783:6: property missing ':'
    at error (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:62:15)
    at declaration (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:223:33)
    at declarations (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:252:19)

啥玩意missing了个冒号嘛。。。改来改去都不对。索性拿来官方的实例。才看清楚。原来每个嵌套的样式前面都需要一个&(注意符号后面有个空格),实际上应该如下才对:

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  & li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    & .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    & .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

这里面有一段用到伪类其中&符号后面是没有空格的,是正确的。编译后的结果:

.catis-list {
  padding: 0 0.666667rem;
  overflow: hidden;
}
​
.catis-list li {
  list-style: none;
  float: left;
  margin-top: 0.506667rem;
  width: 1.506667rem;
}
​
.catis-list li:not(:nth-child(4n)) {
  margin-right: 0.88rem;
}
​
.catis-list li .iconfont {
  font-size: 1.333333rem;
  line-height: 1.333333rem;
  color: #506071;
  display: block;
  text-align: center;
}
​
.catis-list li .cati-name {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  display: block;
  color: #999;
  text-align: center;
}

那么这样就没有问题了。和官方的说明的是一样的,但是另一方面,如果每次都要写&加空格,那岂不是很麻烦,习惯写SASS的兄弟们肯定不愿意这样做啦。

那么我要说的就是另一个插件postcss-nested,如precss所述,这个的确是SASS-LIKE了。当然我暂时还不太明白为何precss要收入两个nest插件(为了满足不同开发人员的习惯?)。我们修改postcss.config.js使用postcss-nested,并重新修改样式代码之前第一段,再次编译执行,一切OK,那么结论就是,如果仅习惯于SASS的嵌套写法,安装postcss-nested插件即可~

坑( ఠൠఠ )ノ

  1. 最后来说说我遇到的坑,除了刚才说的cssnano和autoprefixer同时使用需要注意顺序问题。还有另一个顺序研究,就是确定好将要使用的插件后,在postcss.config.js中配置插件require顺序还是有讲究的,这里我个人观察的确还是从上往下的(至于是不是每个插件轮流处理完文件后挨个执行我尚不确定),比如说,postcss-partial-import这个理应是第一个引入的,你若是把它放在最后面,而css代码中第一行就用了@import那肯定会报错!所以,建议根据css代码的写法来决定你的执行顺序。
  2. postcss-nested插件是大部分SASS开发者所喜爱的,但是你在css文件中用sass写法会遇到以下几个问题:
    1. csslint,css文件不支持嵌套,变量等写法,如果你将文件模式改为sass,注释的方式会变成//,而非/* comments */,当然你可以手写/* ... */这样的注释,但是用快捷键进行注释会很痛苦。

      这里有个小技巧,让项目所有css文件均为sass模式下编辑,在项目settings.json添加:

      "files.associations": {
        "*.css": "scss"
      }

      当然你若是想要支持//注释也是可以的,请再安装postcss-scss插件,我这里不多说这个了,因为我已经决定手写注释了😭

    2. 你手写注释没有问题,然而编译出来的东西会出问题,你样式中最后一行如果将注释写在花括号内部,它转换出来的代码,注释会在外部,这是个大坑,因为在使用postcss-px2rem的时候,那注释来控制是否转换的功能就失效了。我文字描述可能让人迷糊,所以看看代码:

      例如CSS部分代码:

      .test {
        color:#999;
        border:1px solid #ddd; /* no */
        .inner {
          color:#333;
        }
      }

      转换后:

      .test {
        color:#999;
        border:0.13333rem solid #ddd;
      }
      /* no */
      .test .inner {
        color:#333;
      }

      而不是我想要的:

      .test {
        color:#999;
        border:1px solid #ddd;
      }
      .test .inner {
        color:#333;
      }

      理论上是应该输出我想要的结果,却没有输出正确,错误的将1px的border转成rem,原因就是先执行的postcss-nested将注释弄在外部后,postcss-px2rem无法识别到它的规则了。

      我一开始也是装了precss后发现该问题,后来查了很久才发现是这个插件的问题。同时也发现了这个人其实已经提过issue了Wrong location of comment of the last declaration in a nested rule definition只是没人解决。

      而我临时处理的方法就是只好将要注释的那段代码不要写在最后一行了。如下:

      .test {
        border:1px solid #ddd; /* no */
        color:#999;
        .inner {
          color:#333;
        }
      }

      可能有时候并不会有两个样式给border垫底,如果只有一行border的样式,就只能这样:

      .test {
        .inner {
          color:#333;
        }
        border:1px solid #ddd; /* no */
      }

      这样倒是可以了,不过看起来很奇怪,所以如果你使用和我相同的处理方式时,务必注意此点(写完本文时我似乎发现了更好的解决方案,等确认了没有问题后,放在下一期来写~)。

(我记得好像还有坑的,硬是想了半天想不起来了。。。那就先这样吧)

本期结语

最后如果你还想探索更多好玩的好用的插件,你可以看看这里PostCSS Plugins List还有这个可以搜索的分类插件列表,如果你发现了更棒的插件,也欢迎留言喔~另外上面的例子如果我没有写的很明白,或者你只是想直接拿来快速测试使用的话,可以看看这个mobileweb

(关于第三期PostCSS的内容还在考虑。。。可能是对第二期的补充和填坑~敬请期待🙃)

PostCSS学习指南(一)

关于我最近学习PostCSS的一些相关心得和总结

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(一))

PostCSS介绍

PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。

截至目前(2017年7月)PostCSS已经有超过200个插件,你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件,据说这是一个不错的主意,而且非常简单,你可以试着搞点事

看到这里,你可能没有发现它的强大之处,甚至我自己都没有被我翻译的这段官方文字所打动。~~因为没(wǒ)有(yě)对(bù)比(tài)就(huì)没(yòng)有(zhè)伤(wán)害(yì)。~~好了,是时候启动装逼模式了。

维基百科,阿里巴巴,谷歌,Wordpress,Twitter等网站均有使用,大佬们都在用你有什么理由不跟上步伐。

再来看看这张PostCSS下载数量的npm-stat统计表(数据证明一切):

PostCSS下载数量

学习PostCSS之前需要了解一些事情:

  1. PostCSS插件的处理方式类似那些CSS预处理器,而非预处理器和后处理器(PostCSS is Not a *Pre-*processor and Not a *Post-*processor either
  2. PostCSS is Not “Future Syntax”(不是新式语法?不知道怎么翻译)
  3. PostCSS本身并非整理或优化CSS的工具
  4. PostCSS可以完成很多意想不到的事情,例如用postcss-rtl恶搞一下:yum:

那么它还有一些特性,例如创建了一个插件功能极强的生态系统,具有模块化需要什么用什么(precss就是一个集成了类似SASS的包),相比其他的CSS预处理器它的优势主要体现在以下几个方面:

  1. 拥有极高的处理性能(3倍以上的处理速度
  2. 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
  3. 对Source Map支持更好
  4. 他的插件真的太多太强大太便利了

其他对比SASS和LESS的区别在于他们内置了大量的方法,而也许你只需要用到几个变量而已,大材小用。而PostCSS则可制定个人需求的一套解决方案(仅安装需要的插件)。这也就是他高性能的主要原因。几乎SASS和LESS有的功能全都有!

总之好处太多了。这里就不一一列举了。迫不及待的你已经等不及安装使用了吧。

继续阅读“PostCSS学习指南(一)”

安装node-sass的时候报错 Cannot download “https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node”:

搭建项目环境需要安装node-sass,经常会出现错误,提示https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node无法下载,原因就是国外的东西很慢,解决办法也很简单…

最近重装了系统在配置项目环境时需要用到node-sass,经常出现安装失败的情况.

以前也是又是装python又是配环境,也不知道到底是怎么瞎折腾出来的的.好不容易弄好了就没管了.

这次搞虚拟机测试了一下,有个很好的解决方案.是在github上node-sass的issues看到的,屡试不爽,当然如果你也是我这种情况可以试试.我想大部分情况都能解决吧.

先看看我的出错信息

安装node-sass错误信息
安装node-sass错误信息

如果你也是这样的不妨将提示中的这个https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node下载下来,存放在C:\Users\Whidy(你的用户)\AppData\Roaming\npm-cache\node-sass\4.5.3目录内,再尝试重新执行npm install node-sass我想应该就可以成功了吧.

当然版本不同的话会略有差异.请自行对应替换,如果你发现还是下载的很慢,我这里分享一下我上传到百度云的这个4.5.3版本的win32-x64-48_binding.node,然后拷贝到刚才说的目录就好了.

参考: Install node-sass 4.5.0 failed on window 7, “Binary has a problem: Error: %1 is not a valid Win32 application.”.

node搭建服务器局域网内其他设备无法访问的问题

最近公司网络调整,本来记得之前手机访问电脑的服务器好端端的,突然就不好使了…

找了公司网络维护来看看,一时也没看出来.不过测了一下其他人的电脑搭建的服务器是可以访问的.于是推测是本机问题…可是一直没有对本机的网络有修改调整,怎么就突然不行了.只好自己动手查问题.

初步推测防火墙设置.简单暴力的办法关闭防火墙.果然通了…但是个人不喜欢关防火墙,感觉不安全了哈哈哈,其实是觉得小题大做,应该从根本解决问题.

回忆之前本地maven服务器,wamp搭建的服务器都好好的.大概是幻觉,也就是node搭建的服务器我或许没测过.好吧废话少说.不能访问的地址是192.168.1.107:9000,我就查一下什么程序用9000窗口,如下:

占用9000端口的是node.exe
占用9000端口的是node.exe

防火墙状态写了不允许,我猜大概就是这里了.

回到防火墙设置,在允许的应用中,我发现,专用网络的勾没有勾上(如下图),估计问题就在这里,于是勾上,确认后,BINGO…

防火墙node设置规则
防火墙node设置规则

拿出手机刷新一下,好了~

问题就解决了,问题其实解决起来很简单,不过对于网络这块不是很懂的,也遇到类似问题的可以通过类似的办法处理试试.

(话说出现这样的问题会不会是因为我第一次使用node启动服务器时候,弹出来的防火墙提示我误点了不允许导致的- -)

Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)

最近基本上习惯了用VSCODE进行开发了.最主要的感觉就是查找JS里面函数定义和引用很方便.还有可能是装逼心理… :roll:

一开始不知道怎么备份VSCODE的配置,傻乎乎的把要用的插件抄下来,还有用户settings拷贝出来.每次换了电脑或者重装系统什么的都要重新备份.虽然来回调整的概率很低,但是突然哪天需要同步设置什么的就很麻烦了~至少我是在初期经常鼓捣这个编辑器,而且办公在家和公司是不同的设备~所以觉得还是很有必要的~

于是我今天要说的就是这个插件Settings Sync

官方都是英文的,不过还算简单,我把步骤简化一下.

1.安装插件并重启VSCODE就不用说了

安装Settings Sync
安装VSCODE Settings Sync后重新加载

2.重启后按快捷键 alt+shift+u (这里假设你第一次用)

它会弹出一个窗口对应的是github上面的创建个人gist的页面,如果未登录请先登录github.

github创建gist来存储设置
github创建gist来存储设置

保存后会生成一个key

请牢记token id,后面将会用到
请牢记token id,后面将会用到

3.切回到vscode,他会有个输入区,就是存放刚才生成的key

输入刚才生成的key
输入刚才生成的key

然后理论上他就开始对你本机的配置进行一个扫描上传了.至此上传工作完成.

接下来我们到另一台电脑上了下载配置.同样的先安装Settings Sync插件,并重新加载.

然后按快捷键alt+shift+d,就应该会弹出一个输入框,请在这里输入之前保存下来的key(GIST ID),回车后将会自动下载之前上传的配置.

那么下载完成后,你这台电脑修改了相关配置再次上传就好了.是不是感觉方便多了~

其他的说明,如果在输入gist id写错了,读取不到的情况下,大概需要重置设置,按F1,输入sync,这里有重置选项.试试看~

重置sync的gist配置信息等
重置sync的gist配置信息等

还有些其他的功能例如自动上传下载等等,不是很常用,大家可以自行看看官方文档,基本的使用方法就是这样了,我写的如果有问题或者哪里不明白的可以留言- -.

下面是官方说明

http://shanalikhan.github.io/2015/12/15/Visual-Studio-Code-Sync-Settings.html

插件地址

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

使用webpack dev server通过本地IP启动服务器后invalid host header的错误解决办法

最近在研究webpack,本来前阵子webpack dev server还配置的挺正常的…今天突然重新搭环境的时候跑不起来了…不知道是不是版本原因导致的,反正现象是

webpackDevServer服务器启动正常,进行localhost:9000访问正常,但是用本地的ip例如我IP是192.168.1.100,于是在浏览器中访问192.168.1.100:9000则出现了invalid host header.

那么解决这个问题也是差了不少资料.如果你存在此问题可以尝试一下方法:

首先说明环境 webpack 2.6.1 + webpackDevServer 2.5.0

我本来的webpack.config.js文件内的webpackDevServer配置如下

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0'
}

有人说要加一个

disableHostCheck: true

不过不知道这里是没有效果的

又查到说加了一个public参数,试了下就好了.所以就分享下.完整的效果是

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    public: '192.168.1.107'
}

PS:后来发现用disableHostCheck: true其实也行了,大概是缓存原因没有及时看到效果,不论怎么样…出现这种问题的朋友都可以试试咯~

参考

–host 0.0.0.0 Not working
I am getting an “Invalid Host header” message, when running my React app in a Webpack dev server on Cloud9.io
webpack-dev-server2.4.3版本的官方说明
webpack-dev-server disableHostCheck导致 invalid host header

Windows 10 64bit 下nodejs报错”MSBUILD : error MSB4132:…”解决

在win10 64位系统下,关于nodejs下通过npm install环境部署项目时出现报错’MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。’的解决办法

最近用自己笔记本办公配置windows 10下的开发环境(当然不排除WIN7下也有可能存在此问题),其中在进行一个项目的NPM INSTALL的时候一直出错…错误如下

关于NPM INSTALL相关错误信息
关于NPM INSTALL相关错误信息

找了很多解决办法…都无效.十分沮丧…前几天在win7 64bit下也是折腾了好几天.依赖关系实在是复杂- –

我先来说说这个问题怎么处理吧.经过大量查找研究得出的结论…用了一行这个命令:

npm config set msvs_version 2012 --global

参考资料:

MSBUILD : error MSB4132: The tools version “2.0” is unrecognized. Available tools versions are “4.0”.(用户shawmanz32na的回答,也包含其他可能存在的问题的解决集合链接)

Cannot install node modules that require compilation on Windows 7 x64/VS2012

当然也有人说修改注册表的方法,虽然我也用了不过没什么效果.我现在想还原注册表都不行了- -没备份.这里如果大家在试了以上方法仍然无效的情况下可以试试修改注册表的这块的版本号,但是个人不建议,或者提前做好注册表备份.这里不详细说明注册表方法,给个链接大家参考MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。

当然可能还存在其他的问题比如缺少VC++ 20XX运行库什么的

可以试试这个软件下载站的工具常用运行库合集(VB+VC运行库)

jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用解决办法

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用,自定义快捷键的设置command实际上就是prompt_select_workspace,解决了此问题

过完年回来上班的第一天,打开sublime text 3,提示有更新(Sublime Text 3 Build 3103),没有多想就点下载更新了…更新完后,发现问题严重了,一方面是之前朋友买的key失效了,看到非注册的几个单词在窗口顶部就不自在了.当然这个不是本文重点,至于怎么解决这个问题,我相信不会难倒机智的大家.

而另一方面是很多之前的设置也没了.比如自定义快捷键.我有安装SideBarEnhancements这个插件,设置的F12快速预览也没了,只好找回旧版存档重新设置,其实这个问题也不大.
最糟糕的是,之前习惯用的快速切换项目的Ctrl+Alt+P不能用了,这个是旧版默认设置好的.然后到处找快捷键怎么设置的,我很傻,其实后来发现这个问题很好解决.我却绕了个大弯.

首先,百度肯定是搜不到的.然后去用谷歌找.谷歌是万能的,找到如下内容:

{ "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" }

这下添加到自定义keymap,问题解决.参考:Quick Switch Project shortcut doesn’t work anymore(当然,他好像说3098版本就去掉了,我并未注意到可能我一直在使用更旧的版本.而changelog里面似乎也没看到3098)

当然这里还要提一点的是,如果一切设置好了发现还是不能用,那多半是快捷键冲突所致,比如输入法的全局快捷键等等,这里推荐一个虽然有点老,但是还不错的工具Windows Hotkey Explorer,大家自行安装后,可以查看系统全局被占用的快捷键,然后对应的关闭调整一下就好了.

windowsHotkeyExplorer软件界面
windowsHotkeyExplorer软件界面

总结下来我的自定义快捷键是这样的.

[
    { "keys": ["f12"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
        "command": "side_bar_open_in_browser",
        "args":{"paths":[], "type":"production", "browser":""}
    },
    {
        "keys": ["ctrl+t"],
        "command": "side_bar_new_file2"
    },
    {
        "keys": ["ctrl+alt+p"],
        "command": "prompt_select_workspace"
    }
]

最后来说说为啥我笨死了.其实关于这个command,我找不到的话,我直接找旧版本的sublime text的default keymap查一下就好了嘛…笨笨笨………..还费了老大功夫.其他朋友有遇到类似问题也可举一反三,自行配置一个好用的sublime text咯~~~~

工具虽好,务必不要再WIN10下使用该软件,会发生十分可怕的事情!(2017年8月25日 更新)

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl