grunt自动化构建

一、准备工作

• 创建项目
• npm初始化项目

二、安装依赖

yarn global add grunt-cli // 全局安裝gulp模块 
yarn add grunt --dev //安裝gulp模块   安装开发依赖   
// 將sass转化为浏览器可识别的css文件   安装开发依赖  
yarn add grunt-sass sass -dev
// 将ECMAScript新特性转化             安装开发依赖  
yarn add grunt-babel @babel/core @babel/preset-env --dev
// 自动载入文件                       安装开发依赖  
yarn add load-grunt-tasks --dev
// 监视文件变化                       安装开发依赖  
yarn add grunt-contrib-watch --dev
// 清除指定文件夹下的文件              安装开发依赖  
yarn add grunt-contrib-clean --dev
// 浏览器                             安装开发依赖  
yarn add browser-sync --dev
// html文件编译处理                   安装开发依赖  
yarn add grunt-web-swig --dev 

三、编写gruntfile.js

const sass = require('sass')
const loadGruntTaskes = require('load-grunt-tasks')
const browserSync = require('browser-sync')
const bs = browserSync.create() // 创建一个服务器
// 开发服务器 browser-sync 
module.exports = grunt => {
    grunt.initConfig({ // 多任务
        // 编译scss  grunt-sass sass 
        sass: {
            options: {
                sourceMap: true,
                implementation: sass // 指定sass模块编译 sass
            },
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: 'src/',
                        src: '**/*.scss',
                        dest: 'dist/',
                        ext: '.css'
                    }
                ]
            }
            // 这种不能使用通配符
            // main: {
            //     files: {
            //         'dist/assets/styles/main.css': 'src/assets/styles/main.scss' // key 是输出目录，值是输入目录
            //     }
            // }
        },
        // 编译js
        babel: { // grunt-babel @babel/core @babel/preset-env
            options: {
                sourceMap: true,
                presets: [ '@babel/preset-env' ] // 最新标准
            },
            dist: {
                files: {
                    // {
                    //     expand: true,
                    //     cmd: 'src/',
                    //     src: ['**/*.js', '!node_modules/**/*.js'],
                    //     dest: 'dist/',
                    //     ext: '.js'
                    // }
                    // 这种不能使用通配符
                    'dist/assets/scripts/app.js': 'src/assets/scripts/*.js'
                }
            }
        },
        web_swig: {
            options: {
                swigOptions: {
                    //缓存设置为false
                    cache: false
                },
                getData: function (tpl) {
                    //模板文件的数据
                    return { myGruntTitle: 'hello,grunt-swig' };
                }
            },
            main: {
                expand: true, // 
                cwd: 'src/',//源文件文件夹
                src: "**/*.html",//后缀名匹配
                dest: "dist/" //目标文件夹
            },
        },
        // 监视源文件变化  grunt-contrib-wsatch
        watch: { 
            js: {
                files: ['src/assets/scripts/*.js'],
                tasks: ['babel'] // 文件变化后， 执行的任务
            },
            css: {
                files: ['src/assets/styles/*.scss'],
                tasks: ['sass']
            },
            html: {
                files: ['src/*.html'],
                tasks: ['swig']
            }
        },
        // 清除文件
        clean: {
            files: 'dist/*' // 清除dist下所有
        }
    })
    // grunt.loadNpmTasks('grunt-sass') // 载入 grunt-sass 提供的任务
    loadGruntTaskes(grunt) // 自动的加载所有的grunt插件的任务
    // 默认执行任务，先清除历史， 然后在编译后，在监听
    grunt.registerTask('default', [ 'sass', 'babel', 'watch' ])
    // 创建服务任务
    grunt.registerTask('serve', 'miaoshu', function () {
        // const done = this
        bs.init({
            notify: false,
            port: 2080, // 端口
            open: true, // 启动服务器就打开浏览器
            server: {
              baseDir: [ 'dist', 'src', 'public' ], // 依次按照目录顺序查找文件
              routes: {
                '/node_modules': 'node_modules'
              }
            }
          })
    })
    // 编译任务
    grunt.registerTask('compile', [ 'clean', 'sass', 'babel', 'swig' ])
    grunt.registerTask('develop', ['compile', 'watch', 'serve'])
}

四、配置package.json的scripts

"scripts": {
    "clean":  "grunt clean",
    "compile": "grunt compile",
    "develop": "grunt develop"
  },