Mac下前端grunt,bower环境搭建

 

 

1.下载node-*.pkg(nodejs)包安装，地址: https://nodejs.org/en/

 

2.安装npm

 

sudo npm install

 

3.安装grunt

 

bogon:images lijie$ sudo npm install -g grunt-cli

 

4.安装bower:

sudo npm install bower -g

 

5.安装项目依赖组件包：

 

bower install

 

 

 

 

yo webapp

 

grunt server

 

 单独安装grunt:

npm install grunt --save-dev

 

路由模板合成页面：

1.加入angular-ui-router组件

 

bower install angular-ui-router --save

 

 

2.在模块对象构建参数中加入'ui.router'

var flowerApp = angular.module('flowerWebApp', ['ngAnimate', 'ngCookies', 'ngResource', 'ngRoute','ngNotify', 'ui.router'])

 

3.由stateProvider构造页面

 .config([ '$stateProvider', '$urlRouterProvider','$locationProvider', function ($stateProvider, $urlRouterProvider,$locationProvider) {
        $urlRouterProvider
            // The `when` method says if the url is ever the 1st param, then redirect to the 2nd param
            // Here we are just setting up some convenience urls.
//        $urlRouterProvider.when('main/system', 'main/system/staffList')
            // If the url is ever invalid, e.g. '/asdf', then redirect to '/' aka the home state
            .otherwise('/usercenter');
//        $locationProvider.html5Mode(true).hashPrefix('');
//        $locationProvider.html5Mode(true);
        $stateProvider
            /*.state('root', {
                url: '',
                abstract: true
            })*/
            .state('usercenter', {
                url: '/usercenter',
                views: {
                    'header@': {
                        templateUrl: '../views/cart.html',
                        controller: 'CartCtrl'
                    },
                    'maincontent@': {
                        templateUrl: '../views/main.html',
                        controller: 'MainCtrl'
                     }
                }
            })
            .state('helpcenter', {
                url: '/helpcenter',
                views: {
                    'footer@': {
                        templateUrl: '../views/helpcenter.html',
                        controller: 'HelpCenterCtrl'
                     }
                }
            })
 }]);

 

 

This can be caused by incompatible node versions, per example, if you updated from 0.12 to 4.x or 5.x, you would have to either reinstall libsass or rebuild it with the command npm rebuild node-sass.

http://stackoverflow.com/questions/34617529/error-the-libsass-binding-was-not-found

 

http://www.cnblogs.com/Look_Sun/p/4598045.html