用Grunt搭建前端Web工程

用Grunt搭建前端Web工程

1. 安装nodejs 和 npm

scp -r ~/data/linux/node-v4.2.1-linux-x64.tar.gz jinba_nginx:/usr/local/
cd  /usr/local/
tar -zxvf node-v4.2.1-linux-x64.tar.gz

2. 安装全局 grunt

配置系统环境变量
vim /etc/profile

NODE_HOME=/usr/local/node-v4.2.1-linux-x64
export PATH=${PATH}:$NODE_HOME/bin:$NODE_HOME/lib/node_modules

source /etc/profile

在命令行中输入 npm install -g grunt-cli 来安装grunt-cli

3. 项目中配置grunt

首先，从官网下载package.json和Gruntfile.js 放到项目根目录下，或者直接在根目录中新建这两个文件：

package.json:

{ "name": "my-project-name", 
  "version": "0.1.0",
  "devDependencies": { } 
}

devDependencies是项目的依赖项。在devDependencies中配置好依赖项后，可以在项目中运行grunt来加载这些插件

Gruntfile.js :

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
   
  });


  // Default task(s).
  grunt.registerTask('default', []);

};

grunt.initConfig中对任务插件进行配置。

grunt.loadNpmTasks表示要加载使用这些插件。

在default中加入到任务，说明在运行grunt时要执行这些插件。

4.在项目中安装grunt

命令行中进入到项目的根目录，输入

npm install grunt --save-dev
npm install
grunt

安装grunt并配置为开发依赖项。
安装完成后，运行grunt，如果提示done. 则表示前面的安装配置成功了。如图：

故障解决

更换国内源
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

alias cnpm="npm --registry=https://registry.npm.taobao.org
--cache=$HOME/.npm/.cache/cnpm
--disturl=https://npm.taobao.org/dist
--userconfig=$HOME/.cnpmrc"

升级npm和node

sudo npm update npm -g

sudo npm cache clean -f
sudo npm install -g n
sudo n stable