Mac下前端grunt,bower环境搭建

最新推荐文章于 2024-12-19 15:50:52 发布

原创最新推荐文章于 2024-12-19 15:50:52 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js前端 #grunt #bower #环境搭建

Web前端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用Node.js及其相关工具如npm、grunt、bower等进行项目依赖组件包的安装，并提供了路由模板合成页面的具体实现步骤，包括加入angular-ui-router组件，构建模块对象并设置状态提供者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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