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是一款专门针对JavaScript、HTML5和CSS开发的集成开发环境(IDE),它提供了诸如代码高亮、自动完成、...
3. 找到WebStorm的安装目录,通常在“Program Files”或用户的应用程序文件夹内。 4. 将下载的汉化包解压,将解压得到的文件复制到WebStorm的安装目录下的相应语言文件夹,例如“resources_en.jar”替换为...
- **集成开发环境**:WebStorm集成了构建工具(如Grunt、Gulp)、终端模拟器、浏览器同步预览等功能,提供了一站式的开发环境。 通过汉化,WebStorm将更加符合中国用户的使用习惯,使得开发者可以更好地专注于编程...
在项目管理方面,WebStorm支持多种构建工具,如Grunt、Gulp和Webpack,可以方便地配置和运行构建任务。它还集成了任务管理工具如JIRA和GitHub,使得开发流程更加顺畅。同时,WebStorm具有强大的代码重构能力,可以...
8. **自动化工具集成**:WebStorm 支持Grunt、Gulp、Webpack等自动化构建工具,简化前端开发流程。 9. **重构工具**:提供了多种重构操作,如提取方法、重命名变量等,帮助开发者改进代码结构。 10. **代码格式化...
7. **插件安装与使用**:学习如何在WebStorm中安装和配置各种插件,以扩展IDE的功能,例如Prettier用于代码格式化,ESLint用于代码规范检查。 通过这个练习,你将不仅学会WebStorm的基本操作,还能提升你的前端开发...
在安装WebStorm 2018.02时,用户需要注意以下几点: 1. **系统需求**:确认操作系统(Windows、macOS或Linux)是否满足WebStorm的最低硬件和软件要求。 2. **安装过程**:下载并运行安装程序,按照向导步骤进行,...
它还支持多种构建工具(如Grunt、Gulp)和包管理器(如npm、Yarn)。通过集成终端,开发者可以直接在IDE内执行命令行操作。 七、资源汉化 "resources_cn.jar"和"webstormSettings.jar"这两个文件可能包含了WebStorm...
安装 $ 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(可能是任何IntelliJ)为什么? 我有一个Grunt设置,可以调用bash脚本,并且可以在WSL中完美运行。 我曾经从单独的控制台调用grunt,但后来在IDE中找到...
在开始配置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)是前端调试的重要工具,了解如何使用它们进行元素查看、网络请求...
有用的工具 前端开发的有用工具 ##目录 #IDE ##Webstorm ...首次使用需要安装 grunt 和 grunt 插件,并使用--save-dev命令将 devDependencies 保存到package.json文件中。 有了这些操作,你以后只需要运行npm in
为了提高开发效率,可以使用集成开发环境(IDE)如 Visual Studio Code、WebStorm,以及构建工具如 Gulp、Grunt、Webpack。 1. IDE:安装Node.js插件,提供语法高亮、智能提示等功能,便于编写和调试代码。 2. 构建...
8. **集成开发环境**:QUnit可以与各种IDE和构建工具如WebStorm、Grunt、Gulp等无缝集成,提供自动化测试和持续集成的能力。 通过这个"qunit单元测试demo",开发者不仅可以学习到如何编写QUnit测试,还能理解单元...
测试安装全局依赖 $ npm install -g grunt-cli bower运行单元测试 $ grunt test运行代码覆盖率 $ grunt cover使用 ci 系统的报告运行所有测试 $ grunt ci在 webstorm 中运行业力测试您可以通过 webstorm 运行业力...
在实际开发过程中,除了使用JsMinGUI这样的压缩工具,还可以结合其他的前端构建工具,如Gulp、Grunt或Webpack,它们通常内置了JavaScript压缩插件,可以自动化整个流程,确保在部署时始终得到最小化的JavaScript文件...
- **WebStorm**:JetBrains 公司的产品,专为前端开发设计,提供了丰富的智能编码辅助和调试工具。 - **Atom**:GitHub 推出的开源文本编辑器,可自定义程度高,有大量插件支持。 - **Sublime Text**:轻量级编辑...
OrderCloud种子-AngularJS 基于AngularJS的自定义Four51解决方案的...业力单元测试一旦安装了先决条件并运行了grunt版本,就可以设置和运行Karma测试。 使用具有以下设置的Karma插件创建运行配置: 节点解释器:C:\