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. SDUT OJ 1221 亲和数 (找出某个数n所有的因子数,只需要暴力:2->sqrt(n) 即可 )

    亲和数 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 如果a的因子和等于b,b的因子和等于a,且a≠b,则称a,b为亲和数对. ...

  2. 自定义表单SQL命令行批量删除垃圾留言

    1.每天被恶意留言困扰,花费大量的时间去清理却效果不理想,对于没有能力做二次开发并且靠纯手工删除留言的菜鸟来讲是一个大麻烦. 2.大家都知道织梦的留言内容是存在数据库里的,而数据库的内容是可以批量删除 ...

  3. mybatis使用序列批量插入数据

    mybatis只提供了单条数据的插入,要批量插入数据我们可以使用循环一条条的插入,但是这样做的效率太低下,每插入一条数据就需要提交一次,如果数据量几百上千甚至更多,插入性能往往不是我们能接受的,如下例 ...

  4. damon

    不管是否有-f参数,最终程序都会进入 fuse_loop_mt 循环中,在helper.c的fuse_main_common函数中. 1. 有-f参数.这种情况下fuse_setup_common函数 ...

  5. 网站页面打开浏览器table中显示图片

    就类似博客园这种:

  6. codeforces 414B B. Mashmokh and ACM(dp)

    题目链接: B. Mashmokh and ACM time limit per test 1 second memory limit per test 256 megabytes input sta ...

  7. CodeForces979D:Kuro and GCD and XOR and SUM(Trie树&指针&Xor)

    Kuro is currently playing an educational game about numbers. The game focuses on the greatest common ...

  8. 区间DP 等腰三角形

    题目描述:给定一个正N边形,可以通过连线将这个多边形分割成N-2个三角形,问这N-2个三角形中恰有k个等腰三角形的分割方法有多少?这个值可能很大,输出对9397取模的结果.数据范围:n,k <= ...

  9. View Programming Guide for iOS ---- iOS 视图编程指南(一)

    Next About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s ...

  10. 如何用GO实现一个tail -f功能以及相应的思维发散

    此文已由作者杨望暑授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 背景 在服务端查看log会经常使用到tail -f命令实时跟踪文件变化. 那么问题来了, 如果自己写一个同样 ...