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-wiredep`前,确保已经安装了Grunt和Bower,并在项目根目录下创建了`Gruntfile.js`和`.bowerrc`配置文件。在`Gruntfile.js`中添加相应的插件配置,指定HTML文件位置、注入的标签...
grunt-bower-task, 面向 Bower的Grunt插件 grunt-bower-task 安装 Bower 软件包明智地安装。正在启动注意:如果你以前没有使用过 grunt,那么一定要检查一下 guide指南 guide 。 请注意,这里插件仅使用 grunt 的
1. **自动安装Bower组件**:在构建过程中,grunt-bower-bundle会根据你的项目配置自动安装所有Bower依赖,确保项目的环境始终与配置文件保持一致。 2. **文件整理**:它能够将Bower组件的文件按照预定的规则进行...
**Grunt前端开发工具部署** Grunt 是一个广泛使用的JavaScript任务运行器,它极大地提高了前端开发者的工作效率。Grunt 靠的是配置文件`Gruntfile.js`,在这个文件中,开发者可以定义一系列自动化任务,比如编译...
使用 Grunt / Bower / Yeoman 搭建前端绘图应用程序。 -Graphs = c3js + D3。 -App = angularjs 运行 npm install -g generator-angular 然后运行 yo angular [app-name] 然后运行 grunt serve 或 grunt ...
然后,在项目根目录下,通过npm安装`grunt-bower-concat`: ``` npm install grunt-bower-concat --save-dev ``` 2. **配置**:在Gruntfile.js中加载插件并配置。配置项主要包括要合并的文件类型(js或css),...
在前端开发领域,有效管理和自动化构建是...总之,Bower和Grunt是前端开发中的重要工具,它们简化了资源管理和构建过程,使得开发更加高效和便捷。理解并熟练掌握这两个工具的使用,对提升前端开发水平具有重要意义。
在"用Grunt搭建的一个简单的web前端自动化项目"中,我们通常会有一个`Gruntfile.js`,它是Grunt项目的配置文件。在这个文件中,开发者会定义各个任务和它们的依赖关系。例如,可能会有以下任务: 1. **jshint**:这...
Grunt基于Node.js环境,利用npm(Node Package Manager)进行安装和管理插件,这使得Grunt具有丰富的生态系统和高度的可扩展性。 安装与配置Grunt: 1. 首先,确保你的系统已经安装了Node.js和npm。如果尚未安装,...
Bower 是一个前端组件管理工具,它允许开发者管理和安装各种前端库。本文将深入探讨“前端开源库 - bower-files-cli”,这是一个命令行接口(CLI)工具,用于方便地获取所有主要的Bower文件。 首先,我们需要理解...
`grunt-pulses` 通常与其他前端工具结合使用,例如Bower管理前端依赖,Git进行版本控制,以及Gulp或Webpack等其他构建工具,共同构建一个完整的前端开发流程。 ### 学习资源与社区支持 学习如何使用`grunt-pulses`...
**Grunt 前端构建工具** Grunt 是一个基于任务的JavaScript项目构建工具,它允许开发者通过编写配置文件来自动化一系列的前端开发任务。这个压缩包包含了在执行`npm install grunt --save-dev`命令后安装的所有...
### 使用grunt进行前端工程化构建 #### 一、引言 在前端开发领域,随着项目的复杂度不断提高,传统的手动操作已经难以满足高效开发的需求。此时,自动化构建工具应运而生,其中Grunt作为一款非常受欢迎的任务运行...
这个工具结合了Grunt(一个JavaScript任务运行器)和Bower(一个前端依赖管理工具),使你可以方便地管理CSS、JavaScript和其他前端资源。 首先,让我们深入了解一下Grunt。Grunt是一个基于Node.js的构建工具,它...
要开始使用"grunt-bower-angular",首先确保安装了Node.js和npm(Node包管理器),因为Grunt和Bower都是基于这些环境的。接着,在项目根目录下安装Grunt CLI(命令行接口)全局: ```bash npm install -g grunt-cli...
本文将详细介绍如何在 Windows 环境下配置 Grunt 打包环境,并提供一个基本的配置示例。 #### 二、环境搭建与配置 ##### 1. 安装 Node.js 及环境配置 根据给定内容,我们首先需要在 Windows 系统上安装 Node.js。...
grunt-bower-angular-example npm、grunt 和 bower 工作流程示例 当地发展要求 设置说明 这假设上面列出的所有要求都已正确安装并正在运行。 步骤 1 - 克隆存储库并更改为新克隆的存储库/文件夹 第 2 步 - 在终端...
这将把grunt-cli安装到你的全局Node.js模块路径下,通常位于`C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli`(Windows系统)或`/usr/local/lib/node_modules`(Unix/Linux系统)。全局安装...
一个简单的 Grunt / Bower / Foundation bootstrap 注意:标题中的“bootstrap”指的是bootstrapping的实践。 不是恰好被的前端框架。 安装节点。 安装 Grunt & Bower。 获取 Bower 组件。 获取 grunt 模块。 设置...
`bower_components`是前端开发中一个非常重要的目录,它与我们今天要讨论的包管理工具Bower密切相关。Bower是一个基于Node.js的前端组件管理工具,它的主要功能是帮助开发者管理和更新项目中的JavaScript库、CSS样式...