grunt构建一个项目

Posted 蔡春保

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了grunt构建一个项目相关的知识,希望对你有一定的参考价值。

   准备工作:grunt基于node环境运行,所有先安装node.js

1.安装grunt,通过node的npm的包管理工具

 >npm install grunt --save-dev

2.npm init在项目中引导创建一个package.json文件

   >npm init

3.新建一个Gruntfile的js文件,主要是写入grunt的配置

   module.exprots = function(grunt){

      grunt.initConfig({此处写配置的信息})

   }

 4.几个常用的插件

   (1)less监听

      >npm install grunt-contrib-less --save-dev

      a.配置信息:

         less:{development: {files: {‘public/css/home/home.css‘: ‘public/css/home/home.less‘}}}

      b.注册信息: 

         grunt.loadNpmTasks(‘grunt-contrib-less‘)

      c.运行:

         >grunt less

   (2)watch监听

      >npm install grunt-contrib-watch --save-dev

      a.配置信息:

         watch:{css: {files: [ ‘public/css/home/home.less‘],tasks:[‘less‘],options:{livereload:true}}}

      b.注册信息: 

         grunt.loadNpmTasks(‘grunt-contrib-watch‘)

      c.运行:

         >grunt watch

   (3)浏览器同步测试工具

      >npm install browser-sync --save-dev

      a.配置信息:

         不需要配置信息

      b.注册信息: 

         不需要注册信息

      c.运行:

         >browser-sync start --server --file "*.html"

   (4)css压缩

      >npm install grunt-contrib-cssmin --save-dev

      a.配置信息:

      cssmin: {
        target: {
          files: [{
        expand: true,
        cwd: ‘public/css/home‘, //需要压缩的css路径
      src: [‘*.css‘, ‘!*.min.css‘], //需要压缩的css
       dest: ‘build/css/home‘, //压缩之后的路径
       ext: ‘.min.css‘ //压缩之后的css后缀名
      }]
       }
      }

      b.注册信息: 

         grunt.loadNpmTasks(‘grunt-contrib-cssmin‘)

      c.运行:

         >grunt cssmin

 

以上是关于grunt构建一个项目的主要内容,如果未能解决你的问题,请参考以下文章

grunt的使用

Grunt项目构建-插件学习

正确发布一个 grunt 项目

自动化构建 -- Grunt

Grunt 项目推荐的目录结构是啥

前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)