zoukankan      html  css  js  c++  java
  • Grunt和Gulp的使用

    Grunt和Gulp的使用

    Grunt的使用

    新建项目GruntFromEmptyWeb

    新建TypeScript目录:

    在TypeScript目录下右键点击,新建javascript类型的Tastes.ts文件。

    保存后,自动生成Tastes.js文件。

    再创建一个javascript类型的文件Food.ts

    同样,保存后,也会生成Food.js文件

    配置NPM

    新建NPM 配置文件:

    在package.json中的 添加下面内容:

    "grunt": "0.4.5",

    "grunt-contrib-clean": "0.6.0",

    "grunt-contrib-jshint": "0.11.0",

    "grunt-contrib-concat": "0.5.1",

    "grunt-contrib-uglify": "0.8.0",

    "grunt-contrib-watch": "0.6.1"

    保存后,nuget会自动下载相应的包。

    配置Grunt

    新建Grunt 配置文件 gruntfile.js

    module.exports =
    					function (grunt) {
    
            grunt.initConfig({
    
                    clean: ["wwwroot/lib/*", "temp/"],
    
            });
    
    };
    

    添加:

    grunt.loadNpmTasks("grunt-contrib-clean");
    

    右键 Gruntfile.js,选择任务运行程序资源管理器

    右键单clean,选择运行

    运行结果:

    添加 contact

    concat: {
    
            all: {
    
                    src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'],
    
                    dest:
    					'temp/combined.js'
            }
    
    },
    

    添加jshint

    jshint: {
    
            files: ['temp/*.js'],
    
            options: {
    
    
    					'-W069':
    							false,
    
            }
    
    },
    

    添加

    uglify: {
    
            all: {
    
                    src: ['temp/combined.js'],
    
                    dest:
    					'wwwroot/lib/combined.min.js'
            }
    
    },
    

    添加:

    grunt.loadNpmTasks('grunt-contrib-jshint');
    
    grunt.loadNpmTasks('grunt-contrib-concat');
    
    grunt.loadNpmTasks('grunt-contrib-uglify');
    

    保存,打开任务运行管理器,运行。

    添加:

    watch: {
    
            files: ["TypeScript/*.js"],
    
            tasks: ["all"]
    
    }
    
    grunt.loadNpmTasks('grunt-contrib-watch');
    

    这样,在项目打开时,会自动运行。

    Gulp的使用

    Gulp相对Grunt,简单一些。

    新建项目:

    新建NPM配置文件package.json

    新建 gulpfile.js

    添加:

    var gulp = require('gulp');
    
    var clean = require('gulp-clean');
    
    var concat = require('gulp-concat');
    
    var jshint = require('gulp-jshint');
    
    var uglify = require('gulp-uglify');
    
    var rename = require('gulp-rename');
    

    运行结果:

    TypeScript中的代码,合并到combined.min.js中。

  • 相关阅读:
    FFC详解及应用
    getBoundingClientRect
    userAgent
    各种排序算法的分析及java实现
    解读TCP 四种定时器
    TCP那些事儿(下)
    TCP那些事儿(上)
    10个实用的 Linux 网络和监控命令[转]
    监控 Linux 性能的 18 个命令行工具[转]
    4个强大的Linux服务器监控工具[转]
  • 原文地址:https://www.cnblogs.com/heavyhe/p/4546786.html
Copyright © 2011-2022 走看看