1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs
2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息
3. 在需要用到的项目文件下安装grunt,安装命令 :npm install grunt ,安装之后无法执行grunt命令,需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令:npm install -g grunt-cli,再使用 grunt --version 查看grunt-cli版本
4.将需要使用到的插件通过npm 命令安装到本地
5. 安装完成之后,首先需新建一个package.json文件,可以选择在项目根目录下手动创建package.json的文件,也可以选择使用npm init命令进行创建:
 
 
当通过npm install grunt-contrib-cssmin -save-dev 命令时,将会把grunt-contrib-cssmin 添加到package.json中的devDependencies中
其次还需要一个Gruntfile.js的文件,其中配置信息如下:(使用各种插件)
 
module.exports = function (grunt) {
  //任务配置,所有插件的配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),//获取到package.json文件的信息
    uglify: {//uglify压缩插件的配置信息
      options: {//压缩之后,压缩文件中的描述信息
        striBanners: true,
        banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
      },
      build: {
        //目标文件
        src: 'js/index.js',
        //压缩后的文件
        dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
      }
    },
    jshint: {//使用jshint查看js代码中出现的错误,以及可能存在的一些问题
      build: ['Gruntfile.js', 'js/index.js'],
      options: {
        jshintrc: '.jshintrc'
      }
    },
    
    watch: {//使用watch事实监控文件,实现自动化
      build: {
        files: ['js/index.js', 'css/index.css'],
        tasks: ['jshint', 'uglify'],
        options: {spawn: false}
      }
    },
  cssmin: {
    options :{
      shorthandConpacting:false,
      roundingPrecision:-1
    },
    target : {
      files :{
        '合并后.css':['合并1.css','合并2.css','合并3.css']
      }
    }
  }
  });
  //使用grunt插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  //输入grunt命令时需要做哪些(顺序)
  grunt.registerTask('default', [ 'uglify', 'jshint', 'watch']);
};
 
常用的几种grunt插件:
  • Contrib-jshint——javascript语法错误检查;
  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
  • Contrib-clean——清空文件、文件夹;
  • Contrib-uglify——压缩javascript代码
  • Contrib-copy——复制文件、文件夹
  • Contrib-concat——合并多个文件的代码到一个文件中
  • Contrib-cssmin——压缩css代码
  • karma——前端自动化测试工具
grunt.initConfig方法:
用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:
expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。
src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。
ext:表示处理后的文件后缀名。
 
grunt常用函数说明:
grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。grunt.initConfig({});
grunt.loadNpmTasks:加载完成任务所需的模块。grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块('defualt',['uglify','cssmin','jshint','watch']);
执行命令
 
在窗口执行命令 grunt

使用grunt构建前端项目的更多相关文章

  1. vue 构建前端项目并关联github

    这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...

  2. jenkins自动构建前端项目(window,vue)

    我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...

  3. 如何使用Docker构建前端项目

    原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一 ...

  4. Webpack构建前端项目

    前言 公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识 现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创 ...

  5. 用gulp替代fekit构建前端项目

    https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...

  6. 利用fis3构建前端项目工程

    FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...

  7. 【gulp】gulp + browsersync 构建前端项目自动化工作流

    什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...

  8. 使用npm构建前端项目基本流程

    现在各种前端框架, 库文件基本都托管到npm上, 我们平常下载到别人的项目文件, 也基本是用npm 构建的, 不了解点node和npm那是寸步难行. 下面介绍的代码示例不敢说是最佳实践, 但都是我亲自 ...

  9. 使用grunt构建seajs项目

    1.安装nodejs 2.安装grunt-cli npm install -g grunt-cli 3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 //packa ...

随机推荐

  1. 编译android内核和文件系统,已经安装jdk,提示build/core/config.mk:268: *** Error: could not find jdk tools.jar

    1:确保安装jdk,如果没有安装请移布:http://www.cnblogs.com/jiuyueguang/p/3156621.html 2:如果已经安装了jdk,还是提示此错误, 解决方法 请确保 ...

  2. Ubuntu下如何安装并使用Objective-C

    Objective-C是本人用过的最佳类C.面向对象的编程语言.Objective-C与标准C完美兼容,而在此基础上又加上了将面向对象的基础概念诠释得最好的SmallTalk元素,使得它既简洁.又灵活 ...

  3. vue开发总结(一)

    vue使用快一个多月了,从移动端到PC端,踩过的坑也不少.项目的开发是基于element ui 与 mint ui 组件库,下面总结下项目中的一些知识点: 一.网页数据请求 首次进入页面,需要请求数据 ...

  4. DedeCMS模板中用彩色tag做彩色关键词

    DedeCMS模板中用彩色tag做彩色关键词,下面分享一下吧!修改方法: 1.在/include/common.func.php 中加入如下函数: function getTagStyle() { $ ...

  5. 如何在cowboy应用中指定mnesia数据库路径

    创建mnesia数据库的步骤简述: 1)定义脚本: -module(mns). -export([setup/0, clean/0]). -record(user, { id, coin, diamo ...

  6. codeforces 414C C. Mashmokh and Reverse Operation(归并排序求逆序对)

    题目链接: C. Mashmokh and Reverse Operation time limit per test 4 seconds memory limit per test 512 mega ...

  7. Centos Missing Library: QtWebKit.so.4

    /******************************************************************** * Centos Missing Library: QtWe ...

  8. HDU4188:RealPhobia (连分数的运用之一)

    Bert is a programmer with a real fear of floating point arithmetic. Bert has quite successfully used ...

  9. POJ2976:Dropping tests(01分数规划入门)

    In a certain course, you take n tests. If you get ai out of bi questions correct on test i, your cum ...

  10. 区间DP 青蛙的烦恼

    池塘中有n片荷叶恰好围成了一个凸多边形,有一只小青蛙恰好站在1号荷叶上,小青蛙想通过最短的路程遍历所有的荷叶(经过一个荷叶一次且仅一次),小青蛙可以从一片荷叶上跳到另外任意一片荷叶上. 输入数据(fr ...