node-sass安装失败

Building: E:\nodejs\node.exe C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'E:\\nodejs\\node.exe',
gyp verb cli 'C:\\Users\\Administrator\\Desktop\\webpack\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library=' ]
gyp info using node-gyp@3.2.1
gyp info using node@4.1.2 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2.7" in the PATH
gyp verb which failed Error: not found: python2.7
gyp verb which failed at F (C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\node_modules\which\which.js:78:19)
gyp verb which failed at E (C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\node_modules\which\which.js:82:29)
gyp verb which failed at C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\node_modules\which\which.js:93:16
gyp verb which failed at FSReqWrap.oncomplete (fs.js:82:15)
gyp verb which failed python2.7 [Error: not found: python2.7]
gyp verb could not find "python2.7". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python2.7", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack at C:\Users\Administrator\Desktop\webpack\node_modules\node-sass\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "E:\\nodejs\\node.exe" "C:\\Users\\Administrator\\Desktop\\webpack\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Administrator\Desktop\webpack\node_modules\node-sass
gyp ERR! node -v v4.1.2
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
Build failed
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "sass-loader" "--save-dev"
npm ERR! node v4.1.2
npm ERR! npm v2.14.4
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.4.2 postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.4.2 postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/build.js
npm ERR! You can get their info via:
npm ERR! npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Administrator\Desktop\webpack\node_modules\npm-debug.log

解决办法：

npm uninstall node-sass
npm install node-sass@latest

npm uninstall gulp-sass
npm install gulp-sass@latest

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

原生页面切换效果

插件安装：

cordova plugin add com.telerik.plugins.nativepagetransitions

如果使用Cordova4+还需安装插件：

cordova plugin add cordova-plugin-whitelist

在index.html中添加

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Full example:

nameApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {

        // then override any default you want
        window.plugins.nativepagetransitions.globalOptions.duration = 500;
        window.plugins.nativepagetransitions.globalOptions.iosdelay = 350;
        window.plugins.nativepagetransitions.globalOptions.androiddelay = 350;
        window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350;
        window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4;
        // these are used for slide left/right only currently
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;

    });
});

$state.go('view', {movieid: id});   
window.plugins.nativepagetransitions.slide(
  {"direction":"up"},
  function (msg) {console.log("success: " + msg)}, // called when the animation has finished
  function (msg) {alert("error: " + msg)} // called in case you pass in weird values
);

添加指令

nameApp.directive('goNative', ['$ionicGesture', '$ionicPlatform', function($ionicGesture, $ionicPlatform) {
  return {
    restrict: 'A',

    link: function(scope, element, attrs) {

      $ionicGesture.on('tap', function(e) {

        var direction = attrs.direction;
        var transitiontype = attrs.transitiontype;

        $ionicPlatform.ready(function() {

          switch (transitiontype) {
            case "slide":
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
            case "flip":
              window.plugins.nativepagetransitions.flip({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;

            case "fade":
              window.plugins.nativepagetransitions.fade({

                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;

            case "drawer":
              window.plugins.nativepagetransitions.drawer({
                  "origin"         : direction,
                  "action"         : "open"
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;

            case "curl":
              window.plugins.nativepagetransitions.curl({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;              

            default:
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
          }


        });
      }, element);
    }
  };
}]);

<ion-item item="group" collection-repeat="movie in movies" collection-item-width="'100%'" collection-item-height="100" href="#/movie/" class="item-thumbnail-left" transitiontype="flip" direction="left" go-native>

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button class="button-clear" transitiontype="flip" direction="right" go-native>
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

添加服务

nameApp.service('Navigation', function($state) {
  //directly binding events to this context
  this.goNative = function(view, data, direction) {
    $state.go(view, data);
    window.plugins.nativepagetransitions.slide({
        "direction": direction
      },
      function(msg) {
        console.log("success: " + msg)
      }, // called when the animation has finished
      function(msg) {
        alert("error: " + msg)
      } // called in case you pass in weird values
    );
  };
});

最后配置Config

nameApp.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.views.transition('none');
}

官方文档

项目创建

npm init

compass create --bare

or

compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js"

自动化构建

在根目录下创建gulpfile.js

npm gulp gulp-compass browser-sync del run-sequence --save-dev

假如下载失败可修改：

npm config git registry

npm config set registry http://

安装compass-normalize、breakpoint、susy

gem install compass-normalize breakpoint susy

在config.rb里分别引入

require "compass-normalize"
# 响应式
require "breakpoint"
# 布局
require "susy"

main.scss

/*! Vendor */
@import 
  "compass"
, "susy"
, "breakpoint"
, "normalize-version"  
, "normalize/base"
, "normalize/links"
, "normalize/html5"
;

/*! Helpers */
@import 
  "helpers/variables"
;

/*! Base*/
@import 
  "base/font"
;

/*! Layout */
@import 
  "layout/main"
;

/*! Components */ 
@import 
  "components/alerts"
, "components/pop-stripe"
, "components/banner"
, "components/page-header"
, "components/section-bottom"
, "components/contentinfo"
;

/*! Pages*/
@import 
  "pages/page-base"
, "pages/index"
, "pages/install"
, "pages/guide"
, "pages/community"
, "pages/libsass"
;

Sass 高级

@if 三目运算

For explame:

$screenWidth: 500;
body{
  color: if($screenWidth > 768, blue, red);
}

is complied to:

body {
  color: red;
}

@if

For explame:

@if $screenWidth > 768{
  body{
    color: red;
  }
}

is complied to:

body {
  color: red;
}

@if…@else if…@else

For explame:

@if $screenWidth > 768{
  body{
    color: red;
  }
}
@else if $screenWidth >400{
  span{
    color: green;
  }
}
@else{
  p{
    color: blue;
  }
}

is complied to:

span {
  color: green;
}

@for

For explame:

@for $i from 1 to 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

.span1 {
  width: 20%;
}

.span2 {
  width: 40%;
}

.span3 {
  width: 60%;
}

.span4 {
  width: 80%;
}

For explame:

@for $i from 1 through 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

.span1 {
  width: 20%;
}

.span2 {
  width: 40%;
}

.span3 {
  width: 60%;
}

.span4 {
  width: 80%;
}

.span5 {
  width: 100%;
}

@while

For explame:

$j: 6;
@while $j > 0{
  .p#{$j}{
    width: 20% * $j;
  }
  $j: $j - 3;
}

is complied to:

.p6 {
  width: 120%;
}

.p3 {
  width: 60%;
}

@each

For explame:

$k: 1;
@each $c in blue, red, green {
  .div#{$k}{
    color: $c;
  }
  $k: $k+1;
}

is complied to:

.div1 {
  color: blue;
}

.div2 {
  color: red;
}

.div3 {
  color: green;
}

For explame:

@each $key,$color in (default, blue), (info, green), (danger, red){
  .text-#{$key}{
    color: $color;
  }
}

is complied to:

.text-default {
  color: blue;
}

.text-info {
  color: green;
}

.text-danger {
  color: red;
}

For explame:

@each $key, $value in (default: blue, info: green, danger: red){
  .label-#{$key}{
    color: $value;
  }
}

is complied to:

.label-default {
  color: blue;
}

.label-info {
  color: green;
}

.label-danger {
  color: red;
}

数字类型(Number)

For example:

/*! 数字类型 */
$n1: 1.2;
$n2: 12;
$n3: 14px;

p{
  font-size: $n3;
}

is compiled to:

/*! 数字类型 */
p {
  font-size: 14px;
}

字符串类型(String)

For example:

/*! 字符串类型*/
$s1: container;
$s2: 'container';
$s3: "container";

.#{$s3}{
  font-size: $n3;
}

is compiled to:

/*! 字符串类型*/
.container {
  font-size: 14px;
}

Map类型

For example:

is compiled to:

List类型

For example:

is compiled to:

颜色类型

For example:

/*! 颜色类型*/
$c1: blue;
$c2: #fff;
$c3: rgba(255,255,0,0.5);

body{
  color: $c3;
}

is compiled to:

/*! 颜色类型*/
body {
  color: rgba(255, 255, 0, 0.5);
}

Boolean类型

For example:

/*! Bool类型*/
$bt: ture;
$bf: false;

Null类型

For example:

/*! Null类型*/
$null: null;

body{
  @if $null == null{
    color: red;
  }
}

is compiled to:

/*! Bool类型*/
/*! Null类型*/
body {
  color: red;
}

变量操作

For example:

$width1: 10px;
$width2: 15px;

span{
  width: $width1 - $width2;
}

is compiled to:

span {
  width: -5px;
}

For example:

a:hover{
  cursor: e + -resize;
}

is compiled to:

a:hover {
  cursor: e-resize;
}

For example:

a:before{
  content: "A" + bc;
}
a:before{
  content: A + 'bc';
}

is compiled to:

a:before {
  content: "Abc";
}
a:before {
  content: Abc;
}

For example:

p{
  padding: 3px + 4px auto; 
}
$version: 3;
p:before{
  content: 'Hello,Sass #{$version}';
}

is compiled to:

p {
  padding: 7px auto;
}
p:before {
  content: "Hello,Sass 3";
}

For example:

p{
  font: 20px / 10px;
  width: $width2 / 2; 
  width: round($width2) / 2;
  height: (100px / 2);
}

is compiled to:

p {
  font: 20px / 10px;
  width: 7.5px;
  width: 7.5px;
  height: 50px;
}

注意：
1.运算符之间的空格
2.相同运算单位

/*! Good*/
p{
  padding: 3px + 4px auto; 
}

/*! Bad*/
p{
  padding: 3px + 4px auto; 
}

/*! Good*/
p {
  font: (20px / 10px);
}

/*! Bad*/
p {
  font: (20px / 10em);
}

minix

For example:

@minix cont() {
  color: red;
}

body{
  @include cont();
}

is compiled to:

body {
  color: red;
}

For example:

@minix cont($color) {
  color: $color;
}

body{
  @include cont(red);
}

is compiled to:

body {
  color: red;
}

For example:

@mixin cont($color: red, $fontSize: 14px){
  color: $color;
  font-size: $fontSize;
}

body{
  @include cont($fontSize: 18px);
}

is compiled to:

body {
  color: red;
  font-size: 18px;
}

传递多值参数

For example:

@mixin box-shadow($shadow...){
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.shadows{
  @include box-shadow(0px 4px 4px #555, 2px 6px 10px #6dd3ee);
}

is compiled to:

.shadows {
  -moz-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  -webkit-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
}

传递内容

For example:

@mixin style-for-iphone{
  @media only screen and (min-device-width: 320px) and (max-device-width:568px){
    @content;
  }
}

@include style-for-iphone{
  font-size: 12px;
}

is compiled to:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  font-size: 12px;
}

用于响应式布局。

For example:

@function getzIndex($layer: default){
  $zindexMap: (default: 1, modal: 1000, dropdown: 500, grid: 300);
  $zindex: 1;
  @if map-has-key($zindexMap, $layer){
    $zindex: map-get($zindexMap, $layer);
  }
  @return $zindex;
}

@debug getzIndex('afd');
//$layer可选：default,modal,dropdown,grid

嵌套语法

For example:

.main-sec {
  font-family: $main-sec-ff;

  .headline {
    font: {
      family: $main-sec-ff;
      size: 16px;
    }
  }

  .detail {
    font-size: 12px;
  }
}

is compiled to:

.main-sec {
  font-family: "Microsoft YaHei";
}

.main-sec .headline {
  font-family: "Microsoft YaHei";
  font-size: 16px;
}

.main-sec .detail {
  font-size: 12px;
}

用于解决android启动页黑屏和ios白屏。

安装插件

cordova plugins add cordova-plugin-splashscreen

配置config.xml

<preference name="SplashScreenDelay" value="10000" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />

Quick Example

navigator.splashscreen.hide();

Full Example

$ionicPlatform.ready(function(){
    if(navigator.splashscreen) {
        if(ionic.Platform.isIOS()) {
            setTimeout(function() {
                navigator.splashscreen.hide();
            }, 2000);
        }else {
            navigator.splashscreen.hide();
        }
    }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Splashscreen Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        navigator.splashscreen.hide();
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

iOS Quirk

setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000);

参数资料

插件地址
splashscreen.hide

“cordova-plugin-dialogs”,
“cordova-plugin-console”,
“ionic-plugin-keyboard”,
“cn.jpush.phonegap.JPushPlugin”,
“cordova-plugin-crosswalk-webview”
“cordova-plugin-camera”,
“cordova-plugin-file-transfer”,
“cordova-plugin-whitelist”,
“cordova-plugin-datepicker”,
“org.apache.cordova.device”,
“cordova-plugin-geolocation”,
“cordova-plugin-splashscreen”
“cordova-plugin-globalization”
“com.telerik.plugins.nativepagetransitions” 原生页面切换

App用ionic开发完成后，就可以打包发布市场啦。发布一个App可以上传市场的包，关键要做两样东西，一是打一个release包，而是给包签名。命令不多，但命令比较长，记录一下。

打包

首先生成 release包

$  cordova build --release android  # 记得加上--release 参数，不然会打出debug包

执行完这条命令后，cordova会根据你的config.xml生成一个未签名的apk包。在platform文件夹可以找到apk包（platforms/android/ant-build），接下来就可以签名了。

生成安全钥匙

App签名需要用到安全钥匙，你可以用JDK的keytool工具生成，执行下面命令：

# 把my-release-key和alias_name换成你的名字
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

执行后需要回答一些问题，正常填写就好了

Enter keystore password:
Re-enter new password:
What is your first and last name?
  [Unknown]:  test
What is the name of your organizational unit?
  [Unknown]:  test
What is the name of your organization?
  [Unknown]:  test
What is the name of your City or Locality?

之后会生成一个your_name.keystore文件，这就是你的安全秘钥，记得要好好保管，下次更新应用要用到，丢失就大事了，你以后就甭想更新市场上的应用了。

签名

目录跳转至包所在位置，
使用JDK中的jarsigner工具为apk签名，命令如下：

# my-release-key和alias_name换成你的名字
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

执行后会生成一个已签名成功的apk，你可以用这个包发布市场。

优化（可选）

使用Zipalign优化，Zipalign是一个android平台上整理APK文件的工具，它首次被引入是在Android 1.6版本的SDK软件开发工具包中。它能够对打包的Android应用程序进行优化， 以使Android操作系统与应用程序之间的交互作用更有效率，这能够让应用程序和整个系统运行得更快。

命令如下：

$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

done

这篇记录在有tabs的项目里，进入子层级时，底部导航还一直存在，本人是要让他只在首页几个界面存在，其他的隐藏，在这里用到了angularjs的指令，要完成这个步骤分为三步：

1.在标签ion-tabs中添加：ng-class=”{‘tabs-item-hide’: $root.hideTabs}”，源码如下：

<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">

//tabs

</ion-tabs>

2.添加angularjs的指令，源码如下：

//app已经在其他文件中指定，如var app = angular.module("starter",["ionic"])
app.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下：

//这是官网模板中的文件
<ion-view hide-tabs="true" view-title="">

  <ion-content class="padding">

    <img ng-src="" style="width: 64px; height: 64px">
    <p>
      
    </p>
  </ion-content>
</ion-view>

现在体验下效果吧！
另外，如果要把效果搞得好看点，没有什么延迟现象，需要改动ionic.css文件，改动他需要用scss，这些内容前面也有介绍，改动地方如下：

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

上面内容在tabs.scss文件中！

执行cordova build android命令报错信息如下：

E:\Workspaces\Cordova\myApp>ionic build android
Running command: "C:\Program Files\nodejs\node.exe" E:\Workspaces\Cordova\myApp\hooks\after_prepare\010_add_platform_class.js E:\Workspaces\Cordova\myApp
add to body class: platform-android
Running command: cmd "/s /c "E:\Workspaces\Cordova\myApp\platforms\android\cordova\build.bat""
[Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.]
ERROR building one of the platforms: Error: cmd: Command failed with exit code 2
You may not have the required environment or OS to build this project
Error: cmd: Command failed with exit code 2
    at ChildProcess.whenDone (C:\Users\Xiaodi\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:134:23)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

报错了，ANDROID_HOME没有配置，需要说明的是，如果先安装了Android Studio等Android的开发环境，这些变量是应该已经配置好的，因为本机没有装Android Studio所以没有配置，那在环境变量里补上。

我把Android的SDK放在了D:\Android\sdk目录下，在环境变量里添加：

ANDROID_HOME=D:\Android\sdk

还要添加java的环境变量：

JAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_55

然后在PATH里添加：

%ANDROID_HOME%;%JAVA_HOME%\bin;

%ANDROID_HOME%\build-tools;
%ANDROID_HOME%\platform-tools;
%ANDROID_HOME%\tools;

然后 一定要关闭当前的nodejs窗口再重新打开 ，不然新配置的不会起作用。