前端构建工具grunt学习笔记

使用grunt实时编译less文件

下图是项目的文件组织

• 生成package.json文件，通过npm init命令。

• 安装你需要的Devdependencies/denpendencies。

  • npm install grunt --save-dev

  • npm install load-grunt-tasks --save-dev

  • npm install time-grunt --save-dev

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

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

  • npm install grunt --save

GruntFile.js配置

    'use strict';
    
    module.exports = function(grunt){
        require('time-grunt')(grunt);
        require('load-grunt-tasks')(grunt);
        
        grunt.initConfig({
            less: {
                build: {
                    expand: true,
                    cwd: 'less/',
                    src: '['*.less']',
                    dist: 'css/',
                    ext: '.css'
                }
            },
            
            watch: {
                files: ['less/**/*.less'],
                tasks: ['default']
            }
        });
        
        grunt.registerTask('default', ['less']);
    }

• grunt.initConfig()里面传入对象

• 每一个字段名代表一个task

• task里面的内容为target目标

• 在less这个task里面：

  • expand: true 开始动态编译

  • cwd: 'less/' 所有的'src'里指定文件都是相对于这个属性指定的路径

  • src: ['*.less'] 相对与cwd路径下需要匹配的文件，这个地方是匹配所有的less文件

  • dest: 'css/' 生成目标文件的路径

  • ext: '.css' 替换所有生成的目标文件的后缀为这个属性

• 在watch这个task里面：

  • files:['less/**/*.less'] 表示监听less文件夹下，所有less文件，以及所有目录下的less文件

  • tasks: ['default'] 表示当上面被监听的文件发生变化的时候会执行这个任务

• grunt.registerTask('default', ['less']) //注册'default'，里面包含'less'任务

在html文件里面引入less文件

<link href='less/index.less'/>
<script src='node_modules/less/less.js'></script>

启动grunt任务

打开命令行窗口，输入 grunt watch

这条命令就表示启动grunt的task(watch),因为在task(watch)里面配置了tasks，即表示当监听的文件发生变化的时候会执行default任务

这时候你在index.less文件里面做出的修改命令行都出实时编译为css，放心刷新浏览器就好了

使用编辑器自带的编译功能

webstorm有自带的less/sass编译功能，也可以进行相应的配置进行less文件的实时编译