zoukankan      html  css  js  c++  java
  • grunt--自常用配置文件--js/样式压缩打包,sass工具整合使用


    // Project configuration.
    module.exports = function(grunt) {
    // 使用严格模式
    'use strict';

    // 这里定义我们需要的任务
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //其他任务
    concat: {
    options: {
    separator: ';',
    stripBanners: true
    },
    dist: {
    src: [
    "js/EvenUtil.js",
    "js/smeite.js",
    "js/index.js"
    ],
    dest: "assets/js/default.js"
    }
    },
    uglify: {
    options: {
    },
    dist: {
    files: {
    'assets/js/default.min.js': 'assets/js/default.js'
    }
    }
    },
    cssmin: {
    options: {
    keepSpecialComments: 0
    },
    compress: {
    files: {
    'assets/css/default.css': [
    "dist/css/test.css",
    "dist/css/common.css",
    "dist/css/public.css",
    "dist/css/index.css"
    ]
    }
    }
    },
    // 设置任务,删除文件夹
    clean: {
    dist: 'dist'
    },

    // 通过sass编译成css文件
    sass: {
    dist: {
    files: [{
    expand: true,
    cwd: 'scss',
    src: ['*.scss'],
    dest: 'dist/css',
    ext: '.css'
    }]
    }
    },
    // 检测改变,自动跑sass任务
    watch: {
    scripts: {
    files: ['scss/*.scss','js/*.js','assets/css/*.css'],
    tasks: ['sass','concat','uglify','cssmin'],
    options: {
    spawn: false
    }
    }
    }


    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 一定要引用着3个模块
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist,然后重新编译,最后监测文件夹的情况。
    grunt.registerTask('default', ['clean:dist', 'sass:dist', 'concat', 'uglify', 'cssmin', 'watch']);
    };

    文档说明:样式编辑:scss dist为sass生成,assets为最终压缩成
    js编辑:js,assets为最终压缩成

    文档说明:样式编辑:scss dist为sass生成,assets为最终压缩成
    js编辑:js,assets为最终压缩成

    -----sass和grunt的综合应用-----
    http://www.gruntjs.net/getting-started --grunt快速入门(创建package.json和Gruntfile.js
    准备一份新的 Grunt 项目
    一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

    package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

    Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。

    http://blog.csdn.net/playboyanta123/article/details/43230831 安装
    http://caibaojian.com/grunt.html --安装


    http://caibaojian.com/grunt.html#t3


    http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html --值得研究

    npm install <name> --save 安装的同时,将信息写入package.json中

    npm init 自动生成package.json

  • 相关阅读:
    BAT 批处理 for循环 迟环境变量 [MD]
    adb 环境配置 常用命令 [MD]
    XML 解析 DOM SAX PULL 序列化 总结 [MD]
    instanceof 和 isInstance 强转 类型 class [MD]
    Charles 简介 总结 HTTP 抓包 代理 [MD]
    Permission 运行时权限 总结 翻译 [MD]
    反编译 AndroidKiller 逆向 字节码 实践案例 [MD]
    Gradle 翻译 Analyzer APK文件分析 [MD]
    Java 中 boolean 类型占用多少个字节 [MD]
    Shell 命令行工具 Cmder Babun Zsh [MD]
  • 原文地址:https://www.cnblogs.com/lanyueff/p/6290516.html
Copyright © 2011-2022 走看看