grunt 入门实践实记

Javascript的 开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任务。

sudo npm install grunt-cli -g //grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。

npm install //这种方法是针对已有package.json的情况

npm init  //如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

npm install <module> --save-dev  //已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上–save-dev参数,该模块就会自动被加入package.json文件。

命令脚本文件Gruntfile.js

实例gruntfile.js

module.exports = function(grunt) {

// Project configuration.
    grunt.initConfig({

//Read the package.json (optional)
        pkg: grunt.file.readJSON(‘package.json‘),

// Metadata.
        meta: {
            basePath: ‘../‘,
            srcPath: ‘../assets local/sass/‘,
            deployPath: ‘../assets/‘
        },

banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +
                ‘<%= grunt.template.today("yyyy-mm-dd") %>\n‘ +
                ‘* Copyright (c) <%= grunt.template.today("yyyy") %> ‘,

// Task configuration.
        sass: {
            dist: {
                files: {
                    ‘<%= meta.deployPath %>css.css‘: ‘<%= meta.srcPath %>main.scss‘
                },
                options: {
                    sourcemap: ‘true‘,
                    style: ‘compact‘
                }
            }
        },
        watch: {
            scripts: {
                files: [
                    ‘<%= meta.srcPath %>/**/*.scss‘
                ],
                tasks: [‘sass‘]
            }
        },
        uglify: {
            release: {//任务四:合并压缩a.js和b.js
                files: {
                    ‘../assets/js/common.min.js‘: [‘../js/a.js‘, ‘../js/b.js‘]
                }
            }
        }
    });

// These plugins provide necessary tasks.
    grunt.loadNpmTasks(‘grunt-contrib-sass‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

// Default task.
    grunt.registerTask(‘default‘, [‘sass‘]);
    grunt.registerTask(‘default‘, [‘uglify:release‘]);
};

 

时间: 2024-10-09 07:41:50

grunt 入门实践实记的相关文章

sass、less和stylus的安装使用和入门实践

刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用css预处理器来合作,是一种很痛苦,即使不痛苦那也是需要花费非常多的时间来协调合作上的.对于预处 理器的态度,目前是本着学习新技术和推动css向前进的思想来学习新玩意.下面这篇文章来自w3cplus,这是一篇非常强大的文章,私以为互联网上介绍这方面知识的就属这篇文章是鼻祖了. 经过了这篇文章的学习,我

【实战】Docker入门实践二:Docker服务基本操作 和 测试Hello World

操作环境 操作系统:CentOS7.2 内存:1GB CPU:2核 Docker服务常用命令 docker服务操作命令如下 service docker start #启动服务 service docker stop  #停止服务 service docker restart #重启服务 service docker status   #查看服务状态 启动Docker服务 docker是一个CS模型,需要先启动服务端,直接执行 sudo service docker start 启动docker

scrapy入门实践1

Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 这就是整个Scrapy的架构图了: 各部件职能: Scrapy Engine: 这是引擎,负责Spiders.ItemPipeline.Downloader.Scheduler中间的通讯,信号.数据传递等 Scheduler(调度器): 它负责接受引擎发送过来的requests请求,并按照一定的方式进行整理排列,入队.并等待Scrapy Engine(引擎)来请

Grunt入门教程之二 —— concat插件

Grunt入门教程之二 Concat插件 concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如: a.js b.js c.js 当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度. 如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了.一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候

VS单元测试入门实践教程

摘要:本教程不会介绍单元测试的基本理论知识,也不会和大家讨论在实际项目中是否需要写单元测试代码的问题.但是如果你此时想使用VS中的单元测试的工具来测试某个方法是否正确,可你又从来没真正实践过,那么本教程将带你一步一步使用VS2010集成的Unit Test进行断言(Assert)式验证数据的正确性,及代码覆盖率的查看. 关键词:Unit Test.单元测试.代码覆盖率.Assert.Twifly 正文: 在本入门教程中我们假设来测试一个简单的加法运算方法是否正确.该方法能够接受任意个参数,参数类

Docker快速入门实践-纯干货文章

Docker快速入门实践-纯干货文章,如果细看还能发现讲解视频呦!小伙伴们赶紧猛戳吧! Docker快速入门实践-纯干货文章 老男孩教育2016启用最新的官方博文地址: http://blog.oldboyedu.com/ 欢迎小伙伴们收藏关注,干货连连!

Grunt入门教程之(三)

Grunt入门教程之三 Yuidoc插件 Yuidoc 是一个可以将代码注释生成HTML格式文档的工具,文档的生成完全基于JavaDoc风格的代码注释规则. 我们在写公共模块或者API的时候,往往会输出文档给调用者查看,这时候Yuidoc就是一个很好的助手. 下面介绍一下如何在Grunt中使用Yuidoc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 grunt.initConfig({ pkg: grunt.file.readJSON('package.jso

一次基于ssh的sftp服务器被攻击实记

一次基于ssh的sftp服务器被攻击实记 前段时间12月分左右,公司需要搭建了台sftp服务器,当时想只是传下文件,何况我这还是基于SSH的SSL加密的sftp,也没有太再次安全问题,结果这个月每天晚上有人在暴力攻击,安装设置我以前的博文中有写到,这里记录下被攻击,以及防攻击的实录.(centos6.X) 查看ssh登录日志 分析日志 防攻击措施 自己写了个脚本 查看日志 ssh 登录日志一般在 /var/log/secure,有些linux版本可能再/var/log/messages,我们只要

docker入门实践教程 -date: 20191108

docker入门实践教程 -date: 2019108 1.docker架构 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版) 容器非常适合持续集成和持续交付(CI / CD)工作流程.Docker 的可移植性和轻量级的特性,还可以使您轻松地完成动态管理的工作负担,并根据业务需求指示,实时扩展