`
alyouge
  • 浏览: 193305 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

webstorm 安装 grunt

阅读更多
1. 先安装  node    http://www.nodejs.org/
2. 安装 Grunt 客户端  cmd 中 输入 npm install -g grunt-cli
注意:此只是Grunt 客户端,非Grunt
3. 在 WebStorm 下新建项目,然后新建以下两个文件
GruntFile.js
 
module.exports = function (grunt) {
    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'src/js',
                    src: '**/*.js',
                    dest: 'dest/js'
                }]
            }
        },
        concat : {
            css : {
                src: ['src/asset/*.css'],
                dest:'dest/asset/all.css'
            }
        },
        cssmin: {
            css: {
                src:'dest/asset/all.css',
                dest:'dest/asset/all-min.css'
            }
        }
    });
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    // 默认任务
    grunt.registerTask('default', ['uglify','concat','cssmin']);
}

package.json
{
  "name": "grunt-test",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "cssmin": "^0.4.3",
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-css": "^0.5.4"
  }
}



然后在项目窗口下面,webstorm 命令行输入:npm install grunt --save-dev
安装grunt 这里等待时间有点长
然后依次

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-css --save-dev

安装插件

如果还出现错误的信息重启下webstorm  或者点击控制台刷新按钮!
分享到:
评论

相关推荐

    WebStorm安装配置方法图文教程

    本篇教程将详细介绍WebStorm的安装配置方法,适合初学者和有一定经验的开发者参考。 一、WebStorm简介 WebStorm是一款专门针对JavaScript、HTML5和CSS开发的集成开发环境(IDE),它提供了诸如代码高亮、自动完成、...

    WebStorm11汉化包

    3. 找到WebStorm的安装目录,通常在“Program Files”或用户的应用程序文件夹内。 4. 将下载的汉化包解压,将解压得到的文件复制到WebStorm的安装目录下的相应语言文件夹,例如“resources_en.jar”替换为...

    WebStorm汉化包

    - **集成开发环境**:WebStorm集成了构建工具(如Grunt、Gulp)、终端模拟器、浏览器同步预览等功能,提供了一站式的开发环境。 通过汉化,WebStorm将更加符合中国用户的使用习惯,使得开发者可以更好地专注于编程...

    WebStorm-2017.3.2

    在项目管理方面,WebStorm支持多种构建工具,如Grunt、Gulp和Webpack,可以方便地配置和运行构建任务。它还集成了任务管理工具如JIRA和GitHub,使得开发流程更加顺畅。同时,WebStorm具有强大的代码重构能力,可以...

    webstrom2017 免费安装包

    8. **自动化工具集成**:WebStorm 支持Grunt、Gulp、Webpack等自动化构建工具,简化前端开发流程。 9. **重构工具**:提供了多种重构操作,如提取方法、重命名变量等,帮助开发者改进代码结构。 10. **代码格式化...

    webstorm课程练习final1.rar

    7. **插件安装与使用**:学习如何在WebStorm中安装和配置各种插件,以扩展IDE的功能,例如Prettier用于代码格式化,ESLint用于代码规范检查。 通过这个练习,你将不仅学会WebStorm的基本操作,还能提升你的前端开发...

    WebStorm2018.02.rar

    在安装WebStorm 2018.02时,用户需要注意以下几点: 1. **系统需求**:确认操作系统(Windows、macOS或Linux)是否满足WebStorm的最低硬件和软件要求。 2. **安装过程**:下载并运行安装程序,按照向导步骤进行,...

    强大的Web前端开发工具WebStorm

    它还支持多种构建工具(如Grunt、Gulp)和包管理器(如npm、Yarn)。通过集成终端,开发者可以直接在IDE内执行命令行操作。 七、资源汉化 "resources_cn.jar"和"webstormSettings.jar"这两个文件可能包含了WebStorm...

    grunt-minify-html:缩小HTML

    安装 $ npm install --save-dev grunt-minify-html 用法 require ( 'load-grunt-tasks' ) ( grunt ) ; // npm install --save-dev load-grunt-tasks grunt . initConfig ( { minifyHtml : { options : { ...

    wslnodejs:脚本,允许在Webstorm中使用WSL环境中的nodejs

    wslnodejs 该工具,允许在WebStorm中使用来自WSL环境的nodejs(可能是任何IntelliJ)为什么? 我有一个Grunt设置,可以调用bash脚本,并且可以在WSL中完美运行。 我曾经从单独的控制台调用grunt,但后来在IDE中找到...

    让webstrom可以将jade自动编译成html.docx

    在开始配置WebStorm之前,你需要确保已经安装了Node.js。Node.js是JavaScript的服务器端运行环境,同时也包含了npm(Node Package Manager),这是用来管理Node.js模块的工具。你可以从官方网站下载最新版本的Node....

    前端入职第一天安装程序及配置环境

    使用`npm install gulp gulp-cli`或`npm install grunt grunt-cli`进行安装。 6. **浏览器开发者工具**: - 浏览器内置的开发者工具(DevTools)是前端调试的重要工具,了解如何使用它们进行元素查看、网络请求...

    Useful-Tools:前端开发的有用工具

    有用的工具 前端开发的有用工具 ##目录 #IDE ##Webstorm ...首次使用需要安装 grunt 和 grunt 插件,并使用--save-dev命令将 devDependencies 保存到package.json文件中。 有了这些操作,你以后只需要运行npm in

    nodejs安装及环境配置-.zip

    为了提高开发效率,可以使用集成开发环境(IDE)如 Visual Studio Code、WebStorm,以及构建工具如 Gulp、Grunt、Webpack。 1. IDE:安装Node.js插件,提供语法高亮、智能提示等功能,便于编写和调试代码。 2. 构建...

    qunit单元测试demo

    8. **集成开发环境**:QUnit可以与各种IDE和构建工具如WebStorm、Grunt、Gulp等无缝集成,提供自动化测试和持续集成的能力。 通过这个"qunit单元测试demo",开发者不仅可以学习到如何编写QUnit测试,还能理解单元...

    localstorage-space:为 localStorage 提供 API 来计算可用和剩余空间

    测试安装全局依赖 $ npm install -g grunt-cli bower运行单元测试 $ grunt test运行代码覆盖率 $ grunt cover使用 ci 系统的报告运行所有测试 $ grunt ci在 webstorm 中运行业力测试您可以通过 webstorm 运行业力...

    Javascript压缩工具,JsMinGUI

    在实际开发过程中,除了使用JsMinGUI这样的压缩工具,还可以结合其他的前端构建工具,如Gulp、Grunt或Webpack,它们通常内置了JavaScript压缩插件,可以自动化整个流程,确保在部署时始终得到最小化的JavaScript文件...

    node 安装开发工具

    - **WebStorm**:JetBrains 公司的产品,专为前端开发设计,提供了丰富的智能编码辅助和调试工具。 - **Atom**:GitHub 推出的开源文本编辑器,可自定义程度高,有大量插件支持。 - **Sublime Text**:轻量级编辑...

    dvctr:dvctr rpstry

    OrderCloud种子-AngularJS 基于AngularJS的自定义Four51解决方案的...业力单元测试一旦安装了先决条件并运行了grunt版本,就可以设置和运行Karma测试。 使用具有以下设置的Karma插件创建运行配置: 节点解释器:C:\

Global site tag (gtag.js) - Google Analytics