zoukankan      html  css  js  c++  java
  • grunt学习

    grunt  依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。
     
    安装grunt命令行grunt-cli
    安装Grunt-cli,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。
     
    npm install grunt-cli -g
    需要注意,因为使用 -g 命令会安装到全局,可能会涉及到系统敏感目录,如果用 Windows 的话,可能需要你用管理员权限,如果用 OS X / Linux 的话,你可能需要加上 sudo 命令。
    grunt -version 测试是否安装成功
    生成package.json文件
    cd C:webApp 切换到某个文件夹下
    npm init 会给出很多提示信息,输入值即可,最终就会生成文件
     
    安装grunt 和所需要的插件
    合并文件:grunt-contrib-concat
    语法检查:grunt-contrib-jshint
    Scss 编译:grunt-contrib-sass
    压缩文件:grunt-contrib-uglify
    监听文件变动:grunt-contrib-watch
    建立本地服务器:grunt-contrib-connect
     
    npm install grunt --save-dev
     
    查看package.json文件,会发现
    "devDependencies": {
    "grunt": "^0.4.5"
    }
    npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
     
     
    gruntFile.js
    package.json应当放置于项目的根目录中,与Gruntfile在同一目录中
    module.exports = function (grunt) {
        var sassStyle = 'expanded';
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            sass: {},
            uglify: {
                //options: {
                //    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ '
                //},
                //build: {
                //    src: 'src/<%= pkg.name %>.js',
                //    dest: 'build/<%= pkg.name %>.min.js'
                //}
            },
            concat: {
                options: {
                    separator: ';',
                },
                dist: {
                    src: ['a.js', 'b.js'],
                    dest: './global.js',
                },
            }
        });
        grunt.loadNpmTasks('grunt-contrib-concat');
        //grunt.registerTask('outputcss', ['sass']);//sass编译
        //grunt.registerTask('default', ['uglify']);
        grunt.registerTask('concatTask', ['concat']);
    }
    grunt concatTask 执行
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    Spring笔记——装配Bean
    Spring笔记——Spring之旅
    浅读Vue-Router源码记录
    稍微整理ES2020(es11)新东西
    前端实现批量打包下载文件
    CSS常见的三栏灵活布局实现方法
    不吹不黑,学完这篇,PDF导出就没有问题了
    不吹不黑,学完这篇,Word导出就没问题了
    不吹不黑,学完这篇,excel导出就没问题了
    Sass预编译 减法及除法计算问题
  • 原文地址:https://www.cnblogs.com/-simplelife/p/8608950.html
Copyright © 2011-2022 走看看