AngularJS实际项目应用——前端工具介绍

现在前端的工具越来越多，真是应接不暇，有时候觉得也挺困惑的，好多人把经历都专注到了各种工具的使用，而忽略了深入JS语言规范以及架构的学习。本人认为工具够用就好，没必要总是尝试最新的工具各种功能。

简单介绍一下本项目使用的几个前端工具，以及怎么用的，仅供参考：

1）nodejs，npm

主要用来装gulp以及gulp的一些包，还有单元测试框架jasmine，karma以及karma的一些插件

2）bower

管理项目所需要的各种js库，包括angularjs，requirejs，bootstrap，jquery等等

3）gulp

主要用来管理项目的构建过程，包括从bower的目录中拷贝各种js库到目标路径，编译scss，压缩合并angularjs的html模板文件，拷贝帮助文档，以及运行单元测试。

下面看几个任务的代码：

/*编译scss文件*/
gulp.task('compass',function(){
	gulp.src('scss/*.scss')
		.pipe(plumber({errorHandler:errorHandler}))
		.pipe(compass({
			css: 'public/css',sass: 'scss',image: 'public/img'
		}))
		.on('error',function(error){
			console.log(error);
			this.emit('end');
		})
		//.pipe(minifyCSS())
		.pipe(gulp.dest('./public/css'));
});

/**监控scss文件的改变，自动编译scss**/
gulp.task('watch',function() {
  gulp.watch(['scss/*.scss','scss/**/*.scss'],['compass']);
});

/**把一部分angularjs使用的html模板压缩合并到一起**/
/**使用了一个插件，https://www.npmjs.com/package/gulp-angular-templatecache**/
gulp.task('moduleTemplates',function(){
	
	function moduleTemplates(modulePaths){
		var tplFolders = modulePaths.map(function(val,idx){return val + '/**/*.html'});
		
		return gulp.src(tplFolders)
			.pipe(angularTemplates('app.templates.js',{
				root:'',module:'app.tpls',standalone:true,base: function(file){
					//console.log(file.path);
					var path = file.path.substring(file.path.indexOf("modules"));
					return path;
				},templateHeader:'define(["angular"],function(angular){var module = angular.module("<%= module %>"<%= standalone %>);module.run(["$templateCache",function($templateCache) {',templateFooter:'return module;}])});'
			}))
			.pipe(gulp.dest(modulePaths[0]+"../"));
	}

	moduleTemplates(["public/js/app/modules-lhv/","public/js/app/modules-exsi/"]);
	moduleTemplates(["public/js/app_m/modules/"]);
})

/**运行单元测试**/
gulp.task('unitTest',[],function(done) {
	karma.start({
		configFile: __dirname + '/tests/karma.conf.js',singleRun: true
	},done);
});

4）compass

用来编译scss文件。如果项目比较大，需要的css比较多，也应该好好规划一下scss文件的目录和规范，scss真是非常强大。

5）r.js

最后用来压缩合并一部分js