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

  • 相关阅读:
    java-实现两种排序方法
    暑假,一遍一遍敲代码吧!
    java学习-如何定义一个函数及其简单练习
    关于函数重载的理解
    java学习中关于函数的练习
    在校大三学生,真心想学好计算机。可是,,,,没有目标,。。。。。。
    伪分布式网络爬虫框架的设计与自定义实现(一)
    网站架构成长路程之 箴言
    使用asp.net mvc + entityframework + sqlServer 搭建一个简单的code first项目
    使用visualStudio2017创建一个简单的控制台程序
  • 原文地址:https://www.cnblogs.com/lanyueff/p/6290516.html
Copyright © 2011-2022 走看看