WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新

配置css和js文件发生变化就重新合并压缩css和js文件

package.json

{
"name": "AngularAndRequire",
"version": "0.1.0",
"description" : "AngularAndRequire1.0",
"author": "Mario.Li",
"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-css": "~0.5.4"
}
}

Gruntfile.js

'use strict'
module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            libs : {
                src: ['frontend/libs/*.js', '!frontend/libs/require.js'],
                dest: 'dest/libs.js'
            },
            custs: {
                src: ['frontend/**/*.js', '!frontend/libs/*.js'],
                dest: 'dest/cust.js'
            },
            css : {
                src : ['frontend/styles/*.css', '!frontend/styles/index.css'],
                dest : 'dest/index.css'
            }
        },
        uglify : {
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            buildlibs : {
                src : 'dest/libs.js',
                dest : 'dest/libs.min.js'
            },
            buildcusts : {
                src : 'dest/cust.js',
                dest : 'dest/cust.min.js'
            },
        },
        cssmin : {
            buildCss : {
                src : 'dest/index.css',
                dest : 'dest/index.min.css'
            }
        },
        watch : {
            all : {
                files :['**/*.js', '**/*.css'],
                tasks : ['concat', 'uglify', 'cssmin']
            }
        }
    });
    // 载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册任务
    grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'watch']);
};

参考资料:http://blog.csdn.net/itpinpai/article/details/48207493

WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新相关推荐

OpenCV学习笔记#002 OpenCV相机检校例程运行
OpenCV学习笔记#002 OpenCV相机检校例程运行 OpenCV学习笔记#002 OpenCV相机检校例程运行所需文件修改文件修改in_VID5.xml 修改VID5.xml VS 设置 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPQL进行查询
JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPOL进行查询创梦技术交流平台:资源下载,技术交流,网络赚钱: 交流qq群:1群:248318056 2群:251572072 技 ...
python pandas修改列名,Python_Pandas学习笔记02：DataFrame获取列名和修改列名
Python_Pandas学习笔记02:DataFrame获取列名和修改列名 Python_Pandas学习笔记02:DataFrame获取列名和修改列名一.参考资料 [1].?Pandas获取列名 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
oracle如何往dg加盘_学习笔记:Oracle DG系统主备库中表空间和数据文件增加删除等管...
天萃荷净 Oracle Data Guard表空间和数据文件管理汇总汇总日常工作中操作,在Oracle DG结构系统中,如何删除备库表空间和数据文件,如何管理主库与备库之间的文件系统,详见文章内容. ...
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...
Dynamic CRM 2013学习笔记（一）插件输入实体参数解析
1. 问题描述最近新建了一个post事件的插件,传入的参数处理如下: 1: if (context.InputParameters.Contains("Target") & ...
《Linux编程》学习笔记 ·002【Linux常用工具GCC、GDB、Make】
注:前言.目录见 https://blog.csdn.net/qq_44220418/article/details/108428971 文章目录一.GCC编译器 1.GCC编译程序的流程 2.GC ...

WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新

WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新相关推荐

最新文章

热门文章