使用到的工具：
- NodeJs （组件管理）
- GIT （代码管理）
- browserify （模块化）
- Sass (CSS预编译工具)
- Grunt （自动化工具）
- 在文件夹下新建3个空文件夹
build,src,test
- 环境初始化（其实就是生成一个package.json）
npm init
2.安装Grunt
npm install grunt --save-dev
- 新建Gruntfile.js
module.exports = function(grunt) {
// Project configuration.,项目配置，组件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
// Load the plugin that provides the "uglify" task.
// grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
//定义动作
grunt.registerTask('default', []);
};
4.执行grunt,是否出行done，则grunt配置完成
5.grunt常用插件
contrib- 前缀是grunt官方团队提供的插件，否知是第三方
Contrib-jshint——javascript语法错误检查；
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具
6.使用uglify插件
npm install grunt-contrib-uglify --save-dev
修改Gruntfile.js文件
// Project configuration.,项目配置，组件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify);
grunt.registerTask('default', ['uglify']);
- 执行grunt，自动启用uglify插件
- 实验，在src下新建test.js
- 运行grunt，查看是否生成压缩后的文件
8.使用watch，监听变化，实现自动化
安装
npm install grunt-contrib-watch --save-dev
配置
watch:{
build:{
files:['src/*.js','src/*.css'],
tasks:['uglify'],//发生变化执行uglify
options:{spawn:false}
}
}
载入
grunt.loadNpmTasks('grunt-contrib-watch');
执行
grunt.registerTask('default', ['uglify','watch']);
9.执行grunt,现在去修改test.js,会执行设定好的动作，control+c停止。
10.最终的Gruntfile.js
module.exports = function(grunt) {
// Project configuration.,项目配置，组件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
watch:{
build:{
files:['src/*.js','src/*.css'],
tasks:['uglify'],//发生变化执行uglify
options:{spawn:false}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
//定义动作
grunt.registerTask('default', ['uglify','watch']);
};
11.最终的package.json文件
{
"name": "html5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}
12.环境快速搭建
- 安装好nodejs
- 复制package.js Gruntfile.js
- 新建文件夹 src,test,build
- 执行 npm install
- 执行 grunt
- 我没有测试过，应该是可以的
