如何让 jade 模板在 visual studio 中自动编译保存操作?
How can i get jade template to compile automatically in visual studio on save operation?
任何人都可以 post 一些关于如何获取 *.html 文件以编译为 *.jade 文件的基本步骤 Visual Studio 中的文件更改/保存操作吗?
我安装了nodetools,网络必备。语法突出显示似乎有效,但创建 .jade 文件没有任何作用。我认为某处缺少步骤。
我必须在任务中使用类似 grunt-contrib-jade 的东西吗?
Visual Studio 2015: 折腾了很久,得到的答案如下:
- 安装节点
- 为 visual studio
安装 NodeTools
- 运行: npm install jade(安装jade)
- 运行: npm install -g grunt-cli(安装 grunt)
- 运行: npm 安装 bower
- 创建以下 package.json 文件
Package.json : 如下
{
"name": "myapp",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-jade": "0.15.0",
"grunt-contrib-watch": "0.6.1"
}
}
7) 创建以下grunt.js文件
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
data: {
debug: true,
timestamp: "<%= new Date().getTime() %>"
}
},
files: [{
expand: true,
src: '**/*.jade',
ext : '.html'
}]
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'Scripts/bootstrap.js',
dest: 'Scripts/build/bootstrap.min.js'
}
},
watch: {
jade: {
files: '**/*.jade',
tasks: ['jade:watch'],
options: {
spawn: false
}
}
}
});
grunt.event.on('watch', function (action, filepath) {
if (filepath.indexOf('.jade') === -1) return;
var file = {};
var destfile = filepath.replace('.jade', '.html');
file[destfile] = filepath
grunt.config('jade.watch.files', file);
});
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
打开任务资源管理器,然后确保 add/bind 任务 "watch" 打开项目。
任何人都可以 post 一些关于如何获取 *.html 文件以编译为 *.jade 文件的基本步骤 Visual Studio 中的文件更改/保存操作吗?
我安装了nodetools,网络必备。语法突出显示似乎有效,但创建 .jade 文件没有任何作用。我认为某处缺少步骤。
我必须在任务中使用类似 grunt-contrib-jade 的东西吗?
Visual Studio 2015: 折腾了很久,得到的答案如下:
- 安装节点
- 为 visual studio 安装 NodeTools
- 运行: npm install jade(安装jade)
- 运行: npm install -g grunt-cli(安装 grunt)
- 运行: npm 安装 bower
- 创建以下 package.json 文件
Package.json : 如下
{
"name": "myapp",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-jade": "0.15.0",
"grunt-contrib-watch": "0.6.1"
}
}
7) 创建以下grunt.js文件
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
data: {
debug: true,
timestamp: "<%= new Date().getTime() %>"
}
},
files: [{
expand: true,
src: '**/*.jade',
ext : '.html'
}]
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'Scripts/bootstrap.js',
dest: 'Scripts/build/bootstrap.min.js'
}
},
watch: {
jade: {
files: '**/*.jade',
tasks: ['jade:watch'],
options: {
spawn: false
}
}
}
});
grunt.event.on('watch', function (action, filepath) {
if (filepath.indexOf('.jade') === -1) return;
var file = {};
var destfile = filepath.replace('.jade', '.html');
file[destfile] = filepath
grunt.config('jade.watch.files', file);
});
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
打开任务资源管理器,然后确保 add/bind 任务 "watch" 打开项目。