使用Node的express创建项目的具体步骤:
1、安装Node,现在Node安装包进行安装即可;
2、安装grunt-cli : 打开cmd,以管理员的身份运行,将grunt-cli安装到全局环境中去。
grunt-cli是grunt的命令行,负责调用同一目录下的grunt。
npm install -g grunt-cli
mac系统或Linux系统:
sudo npm install -g grunt-cli
验证是否生效: grunt ----------- 会出现 grunt-cli 的版本
3、在node中安装express:
npm install -g express
express在4.0后把命令工具单独分了出来,安装完express后,还得安装express-generator
npm install -g express-generator
查看版本号:
express --version
4、使用express创建项目
切换到项目所在文件夹:
cd /d D:\project
创建项目:
express -e myProject
安装依赖包:
cd myProject && npm install
启动项目:
npm start 或者 node bin/www
浏览器打开:
localhost:3000
npm install -g supervisor
我们再修改的话,浏览器只需要刷新就可以看到修改:
supervisor bin/www
退出监听:
ctrl + c
5、安装grunt
在项目路径下安装:
npm install grunt --save-dev
安装后在目录下的package.json文件可以看到grunt版本。
我们需要在项目目录下创建一个 Gruntfile.js文件,文件内容如下:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
//默认执行的任务列表
grunt.registerTask('default', []);
};
6、 安装第一个插件uglify,用于压缩js文件:
npm install grunt-contrib-uglify --save-dev
为插件做一些配置,以便添加的插件能为我们所用:
第一部分代码:
“options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。注意,其中使用到了pkg获取package.json的内容。“build”中配置了源文件和目标文件。即规定了要压缩谁?压缩之后会生成谁?注意,我们这里将目标文件的文件名通过pkg的name和version来命名。这样的好处是:例如,对文件版本的管理,你只需要在package.json中修改即可,grunt会自动根据最新的版本号生成相应版本的文件,你不用手动去修改文件的文件名。
第二部分代码:
用处是在 grunt.initConfig 方法之后,要让grunt去加载这一个插件,插件只有加载了,才能使用
第三部分代码:
用处是当你在终端输入“grunt”时执行的操作是什么。上面缩写的就是要去给我执行uglify插件,将我的js文件进行压缩,如果输入grunt时不想让其操作,那就在中括号里去掉即可,注意里面包含的各种插件是有顺序的。
7、再安装一个插件jshint,用于检测js语法错误
npm install grunt-contrib-jshint --sava-dev
在Gruntfile做一下配置:
再建立一个名为".jshintrc"的文件来说明检测规则:
8、再安装一个真正实现监听自动化的插件watch
npm install grunt-contrib-watch --save-dev
在Gruntfile中的配置如下: