grunt 怎么安装已经配置好的packet.json

Posted 2023-04-25

参考技术A 第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)
$ mkdir installGrunt
$ cd installGrunt

$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

第二步：创建 package.json

# 在项目的根目录下创建package.json文件
（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）
（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）
（3）从官网上复制或者下载一个package.json文件；（对新手最方便）
（4）手工创建一个package.json文件；（对高手最方便）

添加依赖
（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev
XXX是常用插件名，如grunt-contrib-jshint
最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。

（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install
安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。
注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）

第三步：创建Gruntfile.js
# 添加自己合适的gruntfile配置，运行，得出预期输出
moduwww.hbbz08.com le.exports=function(grunt)
//任务配置
grunt.initConfig(
);
//载入任务
grunt.loadNpmTasks();
//注册任务
grunt.registerTask();

内容参见demo1

$ grunt #

运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。

实践2：加上css压缩的过程

1，在package.json使用命令加一个插件
npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对，下了两个

2，在Gruntfile.js中三个部分都加入cssmin相关的命令

3，运行grunt

注：如果已经在initConfig里配置了uglify和cssmin，则不能再注册任务名为uglify和cssmin，报错如下
(node) warning: Recursive process.nextTick detected. This will break in the next version of node.
Please use setImmediate for recursive deferral（递归延迟）.

解决办法：注释掉
//grunt.registerTask("uglify",['uglify']);
//grunt.registerTask("cssmin",['cssmin']);
grunt.registerTask("default",['uglify','cssmin']);//默认执行的任务

grunt安装配置在webstrom中使用

1.全局范围安装 Grunt命令行（CLI）

npm install -g grunt-cli

Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许在同一个系统上同时安装多个版本的 Grunt。

2.安装grunt相关模块

在package.json文件中添加所需grunt模块，例如：

"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1"

安装这些模块

npm install

执行完这个命令，这些插件会自动安装在node_modules目录下。

若package.json文件不存在，可以自动生成，命令：

npm init

3.配置脚本文件gruntfile.js

模块安装完成之后，在项目根目录下，新建脚本文件Gruntfile.js作为grunt的配置文件

module.exports = function(grunt) {

    // 配置Grunt各种模块的参数
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        concat: {
            options: {
                separator: ‘;‘
            },
            dist: {
                src: [‘scripts/home.js‘, ‘scripts/head.js‘, ‘scripts/foot.js‘],
                dest: ‘dest/libs.js‘
            }
        },
        uglify: {
            build: {
                src: ‘dest/libs.js‘,
                dest: ‘dest/libs.min.js‘
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    // 默认任务
    grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘]);

};

以上做法是先合并形成一个libs，然后再将libs压缩成libs.min.js

4.执行grunt命令

grunt concat
grunt uglify

也可以直接执行default:

grunt default

也可以在WebStrom中，右击gruntfile.js文件名，选择Show Grunt Tasks,显示Grunt窗口。default右击选择 Run ‘default‘。