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中。