`

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

 

 

分享到:
评论

相关推荐

    前端开源库-grunt-bower-install

    在使用`grunt-bower-install`或`grunt-wiredep`前,确保已经安装了Grunt和Bower,并在项目根目录下创建了`Gruntfile.js`和`.bowerrc`配置文件。在`Gruntfile.js`中添加相应的插件配置,指定HTML文件位置、注入的标签...

    grunt-bower-task, 面向 Bower的Grunt插件.zip

    grunt-bower-task, 面向 Bower的Grunt插件 grunt-bower-task 安装 Bower 软件包明智地安装。正在启动注意:如果你以前没有使用过 grunt,那么一定要检查一下 guide指南 guide 。 请注意,这里插件仅使用 grunt 的

    前端开源库-grunt-bower-bundle

    1. **自动安装Bower组件**:在构建过程中,grunt-bower-bundle会根据你的项目配置自动安装所有Bower依赖,确保项目的环境始终与配置文件保持一致。 2. **文件整理**:它能够将Bower组件的文件按照预定的规则进行...

    Grunt前端开发工具部署

    **Grunt前端开发工具部署** Grunt 是一个广泛使用的JavaScript任务运行器,它极大地提高了前端开发者的工作效率。Grunt 靠的是配置文件`Gruntfile.js`,在这个文件中,开发者可以定义一系列自动化任务,比如编译...

    frontend-charting:使用 Grunt Bower Yeoman 搭建前端绘图应用程序。 -Graphs = c3js + D3。 -App = angularjs

    使用 Grunt / Bower / Yeoman 搭建前端绘图应用程序。 -Graphs = c3js + D3。 -App = angularjs 运行 npm install -g generator-angular 然后运行 ​​yo angular [app-name] 然后运行 ​​grunt serve 或 grunt ...

    Grunt的Bower组件连接器_JavaScript_CSS_下载.zip

    然后,在项目根目录下,通过npm安装`grunt-bower-concat`: ``` npm install grunt-bower-concat --save-dev ``` 2. **配置**:在Gruntfile.js中加载插件并配置。配置项主要包括要合并的文件类型(js或css),...

    Modules04. Bower&Grunt.pdf_前端学习资料

    在前端开发领域,有效管理和自动化构建是...总之,Bower和Grunt是前端开发中的重要工具,它们简化了资源管理和构建过程,使得开发更加高效和便捷。理解并熟练掌握这两个工具的使用,对提升前端开发水平具有重要意义。

    用Grunt搭建的一个简单的web前端自动化项目

    在"用Grunt搭建的一个简单的web前端自动化项目"中,我们通常会有一个`Gruntfile.js`,它是Grunt项目的配置文件。在这个文件中,开发者会定义各个任务和它们的依赖关系。例如,可能会有以下任务: 1. **jshint**:这...

    [转]学会使用grunt打包前端代码

    Grunt基于Node.js环境,利用npm(Node Package Manager)进行安装和管理插件,这使得Grunt具有丰富的生态系统和高度的可扩展性。 安装与配置Grunt: 1. 首先,确保你的系统已经安装了Node.js和npm。如果尚未安装,...

    前端开源库-bower-files-cli

    Bower 是一个前端组件管理工具,它允许开发者管理和安装各种前端库。本文将深入探讨“前端开源库 - bower-files-cli”,这是一个命令行接口(CLI)工具,用于方便地获取所有主要的Bower文件。 首先,我们需要理解...

    前端开源库-grunt-pulses

    `grunt-pulses` 通常与其他前端工具结合使用,例如Bower管理前端依赖,Git进行版本控制,以及Gulp或Webpack等其他构建工具,共同构建一个完整的前端开发流程。 ### 学习资源与社区支持 学习如何使用`grunt-pulses`...

    grunt前端构建工具

    **Grunt 前端构建工具** Grunt 是一个基于任务的JavaScript项目构建工具,它允许开发者通过编写配置文件来自动化一系列的前端开发任务。这个压缩包包含了在执行`npm install grunt --save-dev`命令后安装的所有...

    使用grunt进行前端工程化构建

    ### 使用grunt进行前端工程化构建 #### 一、引言 在前端开发领域,随着项目的复杂度不断提高,传统的手动操作已经难以满足高效开发的需求。此时,自动化构建工具应运而生,其中Grunt作为一款非常受欢迎的任务运行...

    grunt-bower-wordpress:WordPress 主题的 Grunt & Bower 配置

    这个工具结合了Grunt(一个JavaScript任务运行器)和Bower(一个前端依赖管理工具),使你可以方便地管理CSS、JavaScript和其他前端资源。 首先,让我们深入了解一下Grunt。Grunt是一个基于Node.js的构建工具,它...

    grunt-bower-angular

    要开始使用"grunt-bower-angular",首先确保安装了Node.js和npm(Node包管理器),因为Grunt和Bower都是基于这些环境的。接着,在项目根目录下安装Grunt CLI(命令行接口)全局: ```bash npm install -g grunt-cli...

    grunt打包配置

    本文将详细介绍如何在 Windows 环境下配置 Grunt 打包环境,并提供一个基本的配置示例。 #### 二、环境搭建与配置 ##### 1. 安装 Node.js 及环境配置 根据给定内容,我们首先需要在 Windows 系统上安装 Node.js。...

    grunt-bower-angular-example:npm、grunt 和 bower 工作流程示例

    grunt-bower-angular-example npm、grunt 和 bower 工作流程示例 当地发展要求 设置说明 这假设上面列出的所有要求都已正确安装并正在运行。 步骤 1 - 克隆存储库并更改为新克隆的存储库/文件夹 第 2 步 - 在终端...

    grunt-cli模块

    这将把grunt-cli安装到你的全局Node.js模块路径下,通常位于`C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli`(Windows系统)或`/usr/local/lib/node_modules`(Unix/Linux系统)。全局安装...

    grunt-sass-foundation-bootstrap:一个简单的 Grunt Bower Foundation 引导程序

    一个简单的 Grunt / Bower / Foundation bootstrap 注意:标题中的“bootstrap”指的是bootstrapping的实践。 不是恰好被的前端框架。 安装节点。 安装 Grunt & Bower。 获取 Bower 组件。 获取 grunt 模块。 设置...

    bower_components

    `bower_components`是前端开发中一个非常重要的目录,它与我们今天要讨论的包管理工具Bower密切相关。Bower是一个基于Node.js的前端组件管理工具,它的主要功能是帮助开发者管理和更新项目中的JavaScript库、CSS样式...

Global site tag (gtag.js) - Google Analytics