现在前端的工具越来越多,真是应接不暇,有时候觉得也挺困惑的,好多人把经历都专注到了各种工具的使用,而忽略了深入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