• Grunt使用教程(限winows)


    前提:安装nodejs
    一、 打开dos命令窗口,输入命令 “node -v”,确认nodejs安装成功

    二、 其次,安装grunt-cli (该插件是grunt命令行插件),执行命令“npm install –g grunt-cli”,”-g”表示全局安装。Ps:一般我们使用npm install的时候最好是在项目下进行安装,全局安装的问题是当你换一台机器的时候有可能不适用。

    三、 新建一个文件夹,命名随意。

    四、 新建两个文件,名字分别为package.json跟Gruntfile.js,其中Gruntfile.js里面暂时不写入内容(注意,使用echo创建文件的时候,要把文件里面的内容清空)

    五、 打开package.json文件,此文件的作用,前端的同学应该非常熟悉,规范上就是定义前端项目依赖跟项目描述的,写入如下内容并保存(其实就是json字符串):
    {
    "name":"test",
    "version":"0.1.0",
    "description":"test demo",
    "devDependencies":{
    }
    }

    这里先不在devDependencies中写东西,因为以后在用npm install的时候可以指定版本号。
    六、 cd命令行到项目根目录下,执行npm install

    黄框:现在仓库(使用npm install生成的node_modules文件夹)中没有依赖
    红框:没有指定许可证书,可以自己在package.json中写上”license”:”MIT”
    查看项目目录:
    七、 命令行安装grunt、grunt-contrib-uglify(压缩js用的插件)
    这里的 - -save –dev 表示要将信息写入到package.json的devDependencies中

    查看package.json跟node_modules文件夹,会出现对应的信息

    八、 在Gruntfile.js中写入项目的配置信息:

    创建一个test.js的文件,保证里面有一些js内容

    同时配置uglify的信息,包括要压缩的文件跟压缩文件生成的位置

    PS:其中使用到了pkg获取package.json的内容。

    九、 还有重要的一步:上边我们是进行了配置,但是没有告诉grunt要怎么做,所以要有接口加载、执行(加载插件、执行配置)

    Ps:注册的时候直接写入 [ ] 中插件名称表示执行grunt的时候同事执行了该功能
    十、 执行grunt命令

    可以看到已经执行成功,看一下目录

    确实压缩成了一行,成功!!!

    PS:要十分注意json字符串的标点符号的书写!!!
    这里的图片没法显示,存入自己云笔记中!,需要找我要

  • 相关阅读:
    Xshell 跳板机快速登录脚本按钮
    (一)angularjs5 环境搭建
    Myeclipse 内存溢出解决方法
    php 代码放到服务器上验证码不好用
    表格里面的input在底部
    Smarty忽略大括号
    php富友表单提交接口对接
    php富友接口对接http请求
    js去掉html标签
    删除的时候提示是否删除
  • 原文地址:https://www.cnblogs.com/kevinfuture/p/5265486.html
Copyright © 2020-2023  润新知