百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

Grunt(1)从安装开始创建一个基本的Grunt

yuyutoo 2024-10-28 20:24 3 浏览 0 评论

Grunt的介绍:http://www.gruntjs.net/getting-started

注意:到这个选项的时候选这个

3:Git Bush安装Grunt客户端:npm install -g grunt-cli

4:打开git bash查看安装是否成功。

4:项目结构图:

5:把package.json放到MvcApplication1文件夹下。package.json的基本内容。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.1"
  }
}

6:git bash进入MvcApplication1文件夹下。执行npm install,如果此时没有package.json文件则会报错。

7:执行成功

8:在目录下添加Gruntfile.js

// 常用的功能:
    // uglify:压缩
    // cssmin:css操作
    // imagemin:图片操作
    // htmlmin:html操作
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {//压缩
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'//头信息
 },
 build: {
 //动态文件映射,当运行任务时会自动找到cwd参数下的src参数下所有符合规则的js文件
 //添加或删除文件时不需要更新 Gruntfile。
 files: [
 {
 expand: true,       // 启用动态扩展
 cwd: 'Scripts/',    // 源文件匹配都相对此目录
 src: ['*.js'],      // 匹配规则
 dest: 'dest/js/',   // 任务目标保存路径
 ext: '.min.js',     // 目标文件路径中文件的扩展名
 extDot: 'first'     // 扩展名始于文件名的第一个点号
 },
 ],
 }
        },
        cssmin: {
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', 
 },
 //动态文件映射,当运行任务时会自动找到cwd参数下的src参数下所有符合规则的css文件
 build: {
 files: [{
 expand: true,
 cwd: 'Content/',
 src:  ['*.css','**/*.css'],
 dest: 'dest/css/',
 ext: '.min.css',
 extDot: 'first'
 }]
 }
        }
        
        });
        
    //载入concat和uglify插件,分别对于合并和压缩 
    grunt.loadNpmTasks('grunt-contrib-uglify');//
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    //当执行 Grunt 且不通过参数指定任务时,将执行本配置的内容任务。
    grunt.registerTask('default', ['uglify','cssmin']);
}

9:使用grunt命令执行压缩css, grunt cssmin

相关推荐

微软Win10/Win11版Copilot上线:支持OpenAI o3推理模型

IT之家4月3日消息,科技媒体WindowsLatest昨日(4月2日)发布博文,报道称Windows10、Windows11新版Copilot应用已摘掉Beta帽...

WinForm 双屏幕应用开发:原理、实现与优化

在当今的软件开发领域,多屏幕显示技术的应用越来越广泛。对于WinForm应用程序来说,能够支持双屏幕显示不仅可以提升用户体验,还能满足一些特定场景下的业务需求,比如在演示、监控或者多任务处理等场景...

推荐一个使用 C# 开发的 Windows10 磁贴美化小工具

...

OpenJDK 8 安装(openjdk 8 windows)

通常OpenJDK8和11都能互相编译和通用。我们建议使用11,但是如果你使用JDK8的话也是没有问题的。建议配置使用OpenJDK,不建议使用OracleJDK,主要是因为版...

基于 Linux 快速部署 OpenConnect VPN 服务(ocserv 实战指南)

一、前言在如今远程办公和内网穿透需求日益增长的背景下,搭建一套安全、稳定、高效的VPN系统显得尤为重要。OpenConnectServer(ocserv)是一个开源、高性能的VPN服务端软件...

巧妙设置让Edge浏览器更好用(edge怎么设置好用)

虽然现在新版本的Edge浏览器已经推出,但是毕竟还处于测试的状态中。而Win10系统里面自带的老版Edge浏览器,却越来越不被人重视。其实我们只需要根据实际情况对老版本的Edge浏览器进行一些简单的设...

WPF做一个漂亮的登录界面(wpf页面设计)

...

微软开源博客工具Open Live Writer更新:多项Bug修复

OpenLiveWriter前身是WindowsLiveWriter,是微软WindowsLive系列软件之一,曾经是博主们非常喜爱的一款所见即所得博文编辑工具,支持离线保存,还支持图像编辑...

基于OpenVINO的在线设计和虚拟试穿 | OPENAIGC大赛企业组优秀作品

在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。...

C#开源免费的Windows右键菜单管理工具

...

Windows10或11中隐藏的功能,用它再也不用担心电脑中病毒!

...

Python open函数详解(python open函数源码)

演示环境,操作系统:Win1021H2(64bit);Python解释器:3.8.10。open是Python的一个内置函数,一般用于本地文件的读写操作。用法如下。my_file=open(fi...

Windows 11 安装 Docker Desktop(Windows 11 安装助手 Windows 易升 关系)

...

Windows 11 新版发布:屏幕亮度自适应控制,小组件界面重新设计!

...

世界上最好用的Linux发行版之一,OpenSUSE安装及简单体验

背景之前无意在论坛里看到openSUSE的Linux发行版,被称为世界上最好用的Linux发行版之一(阔怕),一直想体验一下,于是这期做一个安装和简单体验教程吧。...

取消回复欢迎 发表评论: