配置Nodejs运行环境，安装grunt运行angular项目

45 阅读 0 评论 30 点赞

我是靠谱客的博主眼睛大帽子，最近开发中收集的这篇文章主要介绍配置Nodejs运行环境，安装grunt运行angular项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、node.js安装
1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2、选安装目录进行安装
3、测试是否安装成功
$ node -v
$ npm -v

二、使用淘宝 NPM 镜像
1、大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
2、安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3、这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]

三、全局安装相关工具
1、安装generator-angular
$ cnpm install -g generator-angular；
2、安装bower
$ cnpm install -g bower;
3、安装grunt构建工具，先全局安装
$ cnpm install -g grunt-cli
$ cnpm install -g grunt

四、配置工程
1、通过cmd进入工程根目录
$ cd D:devsoftnodejsprojectsangulr
2、安装项目依赖的库
$ cpnm install
3、生成package.json文件（已存在，可以直接粘贴到根目录下）
$ cnpm init
4、当前工程安装bower
$ bower install --save-dev
5、初始化当前工程的bower，此操作会在当前目录下生成bower.json文件
$ bower init
6、当前工程安装grunt和grunt相关插件
$ cnpm install grunt --save-dev
$ cnpm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
7、当前工程安装livereload插件
$ cnpm install livereload-js --save-dev
8、新增Gruntfile.js，实现以下功能（已存在，可以直接粘贴到根目录下）
　　（1）合并文件： grunt-contrib-concat
　　（2）语法检查 : grunt-contrib-jshint
　　（3）sass编译 : grunt-contrib-sass
　　（4）压缩文件 : grunt-contrib-ugligy
（5）建立本地服务器 : grunt-contrib-connect
　　（6）监听文件变动 : grunt-contrib-watch
9、确定根目录下存在index.html
10、执行Gruntfile.js中配置的任务
$ grunt watchit
11、一切正常，则浏览器自动打开，请求地址http://localhost:9001/，显示工程index.html

常见问题：
1、如果出现找不到>> Error: Cannot find module 'xxxx'，则进行对应的安装
$ cnpm install xxxx --save-dev
2、grunt执行启动服务器，监听文件变动，出现以下错误
Running "watch" task
Waiting...
Warning: Cannot find module 'livereload-js/dist/livereload.js'

是因为没有安装livereload-js，执行上边的第7步即可
3、报错：You need to have Ruby and Sass installed and in your PATH for this task to work.
则安装sass和ruby
ruby下载地址https://rubyinstaller.org/downloads/
下载后安装，勾选上添加系统变量

打开Start Command Prompt with Ruby，命令行中直接输入gem install sass进行装sass

4、配置内容变动监听和自动刷新livereload不起作用
检查是否是360浏览器，如是可以换其他浏览器重试，一般能够正常自动刷新。

package.json代码实例

{
"name": "angulr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"body-parser": "^1.18.2",
"connect-livereload": "^0.6.0",
"faye-websocket": "^0.11.1",
"figures": "^2.0.0",
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-cssmin": "*",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^3.1.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"livereload-js": "^2.2.2",
"matchdep": "*",
"node-sass": "^4.7.1",
"uglify-js": "^3.1.9",
"uri-path": "^1.0.0"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

Gruntfile.js代码实例：

// ***********************************
// http://www.gruntjs.net/
// Grunt 是一种自动化任务处理工具，它就是一个工具框架，有很多插件扩展它的功能。
// 一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
// Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。
//***********************************
module.exports = function(grunt) {

var sassStyle = 'expanded';

grunt.initConfig({
// 读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了 <%= pkg.name %> 来输出项目名称），这样可以提高灵活性
pkg: grunt.file.readJSON('package.json'),

//****任务配置代码****
// 自动将 ./scss/style.scss 生成 ./style.css
//sass: {
// output : {
// options: {
// style: sassStyle
// },
// files: {
// './style.css': './scss/style.scss'
// }
// }
//},
// 自动将 ./src/plugin.js 和 ./src/plugin2.js 合并成 ./global.js
concat: {
dist: {
src: ['./js/config.js', './src/*/*.js'],
dest: './global.js',
},
},
uglify: {
compressjs: {
files: {
'./global.min.js': ['./global.js']
}
}
},
jshint: {
all: ['./global.js']
},
watch: {
scripts: {
files: ['./js/config.js'],
files: ['./js/config.js'],
tasks: ['concat','jshint','uglify']
},
sass: {
files: ['./scss/style.scss'],
tasks: ['sass']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'*.html',
'style.css',
'global.min.js'
]
}
},
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
hostname: 'localhost'
},
server: {
options: {
port: 9001,
base: './'
}
}
}
});

//****插件加载代码****
// sass编译
//grunt.loadNpmTasks('grunt-contrib-sass');
// 合并文件
grunt.loadNpmTasks('grunt-contrib-concat');
// 语法检查
grunt.loadNpmTasks('grunt-contrib-jshint');
// 压缩文件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 监听文件变动
grunt.loadNpmTasks('grunt-contrib-watch');
// 建立本地服务器
grunt.loadNpmTasks('grunt-contrib-connect');

//****任务注册代码****
//grunt.registerTask('outputcss',['sass']);
grunt.registerTask('concatjs',['concat']);
grunt.registerTask('compressjs',['concat','jshint','uglify']);
//来注册一个任务,意思是在 watchit 上面注册了'concat','jshint','uglify','connect','watch'几个任务， watchit 就是别名
grunt.registerTask('watchit',['concat','jshint','uglify','connect','watch']);
//default是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。
grunt.registerTask('default',['concat','jshint','uglify','connect','watch']);

};