需要系統(tǒng)中安裝了git, node, bower工具劫狠，本文的運行版本是
node -vv6.9.1
bower -v1.8.0
gulp -vCLI version 1.2.2
使用yeoman generators
- angular generator是一個angular骨架代碼生成工具
yo angular
? Would you like to use Gulp (experimental) instead of Grunt? Yes
? Would you like to use Sass? Yes
? Would you like to include Bootstrap? Yes
Which modules would you like to include? angular-animate.js, angular-aria.js, angular-cookie
s.js, angular-resource.js, angular-messages.js, angular-route.js, angular-sanitize.js, angular
-touch.js
安裝karma的依賴
npm install generator-karma --save-dev
Tips: 加上
--save-dev參數(shù)不僅會在本地安裝需要的包，而且會把依賴添加到package.json中，供別人同步代碼的時候使用灾螃。生成代碼如下:
"generator-karma": "^2.0.0",
安裝項目需要的依賴的node_modules和bower_components
npm install
bower install
運行g(shù)ulp任務(wù)
Gulp是一個前端開發(fā)工具，通過gulp可以方便的配置build, test, 依賴注入等等的工作，只需要執(zhí)行類似
gulp test這樣一個命令。
- 由于gulp本身被包含在項目的依賴中窟哺，可以在node_modules下面找到
./node_modules/gulp/bin/gulp.js -version
- 通過embed gulp來運行build項目
./node_modules/gulp/bin/gulp.js
- 通過embed gulp來啟動一個本地的dev環(huán)境
./node_modules/gulp/bin/gulp.js serve
Tips: 其實可以在global環(huán)境下安裝gulp，而不用每次都輸入gulp的完整路徑技肩，運行
npm install -g gulp-cli來安裝且轨。
我們推薦使用這種方式，所以在之后的內(nèi)容中都將直接采用類似gulp serve的寫法
在運行了gulp serve之后虚婿，會默認打開系統(tǒng)默認的瀏覽器
查看gulpfile.js文件殖告，我們可以修改文件使之打開firefox瀏覽器，來幫助我們調(diào)試雳锋，當(dāng)然你系統(tǒng)中要已經(jīng)安裝了firefox
gulp.task('start:client', ['start:server', 'styles'], function () {
- openURL('http://localhost:9000');
+ openURL('http://localhost:9000','firefox');
});
修改wiredep配置
打開gulpfile.js配置文件可以看到，這里的bower任務(wù)是發(fā)現(xiàn)所有bower依賴（包括css和js）羡洁，運行
gulp bower將其注入到index.html中玷过。css 注入示例，運行之后會在中間加入css依賴
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
- js 注入
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
- 但是在默認的yeoman生成的代碼中，bower任務(wù)如下辛蚊，這地方有兩個問題4
// inject bower components
gulp.task('bower', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: yeoman.app + '/bower_components',
ignorePath: '..'
}))
.pipe(gulp.dest(yeoman.app + '/views'));
});
- 可以發(fā)現(xiàn)directory變量指向的app/bower_components粤蝎，但是bower默認安裝在根目錄下，需要修改這個路徑
- 生成的gulp.dest pipeline是把index.html放到app/views袋马，但是啟動的時候?qū)ふ襛pp的index.html
- 為了解決上面兩個問題初澎，首先需要修改.bowerrc文件，指定其生成目錄的位置
{
"directory": "app/bower_components",
"strict-ssl": false
}
- 其次修改gulp.js虑凛，重新生成的index.html覆蓋原來的
// inject bower components
gulp.task('bower', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: yeoman.app + '/bower_components',
ignorePath: '..'
}))
- .pipe(gulp.dest(yeoman.app + '/views'));
+ .pipe(gulp.dest(yeoman.app)); //這里放到app目錄下會覆蓋原來的index.html
});
- 由于每次運行wiredep需要執(zhí)行
gulp bower碑宴，怎樣在gulp serve中每次自動運行下gulp bower把新添的bower依賴放到index.html中？可以通過添加gulp任務(wù)依賴的方式
-gulp.task('start:server', function() {
+gulp.task('start:server', ['bower'], function() {// 這里的中括號bower桑谍，就是運行啟動server時候的依賴
$.connect.server({
root: [yeoman.app, '.tmp'],
livereload: true,
// Change this to '0.0.0.0' to access the server from outside.
port: 9000
});
});
- 運行
gulp serve, 會直接打開firefox顯示結(jié)果
Gulp load plugins
這是一個非常有用的語法糖延柠，可以幫助用戶方便的訪問已經(jīng)安裝的gulp插件。
var $ = require('gulp-load-plugins')();
$.jshint;//gulp-jshint
$.sass; //gulp-sass
Gulp nodemon
Nodemon在開發(fā)過程中相當(dāng)有用锣披，它會自動監(jiān)測nodejs源代碼贞间，然后重新啟動。
以下是一個例子雹仿，注意callback函數(shù)的作用增热。
Tips:很多時候触机，我們說一個gulp任務(wù)A依賴于另外一個gulp任務(wù)B炼吴，其實是在A的callback函數(shù)返回的時候，表明A任務(wù)已經(jīng)完成嵌灰，之后才會去調(diào)用B任務(wù)票顾。
所以在定義一些有依賴的gulp任務(wù)函數(shù)的時候础浮，需要注意callback函數(shù)的寫法。
gulp.task('start:server', [],(callback) => {
let started = false;
return $.nodemon({// $.nodemon是gulp load plugin的寫法
script: 'build-server/app.js',
ignore: ["app","dist","upload","node","node-v6.9.1","build-server"]
}).on('start', function () {
if (!started) { //為了防止執(zhí)行多次
callback();
started = true;
}
});
});
Gulp watch and livereload
與nodemon的后端監(jiān)測相對的奠骄，前端監(jiān)測使用watch和livereload配合豆同。watch用來監(jiān)測文件，當(dāng)文件有改動的時候含鳞，livereload可以動態(tài)的加載到服務(wù)器上影锈，
需要注意的是，livereload是一個服務(wù)進程蝉绷，可以加載包括html,前端js,css等等文件鸭廷。
gulp.task('watch', function () {
$.livereload.listen();
$.watch(paths.views.files)
.pipe($.plumber())
.pipe($.livereload());
});
使用ES6
gulp本身的gulpfile.js可以支持ES6, 例如上面代碼中使用到的let定義變量，匿名函數(shù)等等功能熔吗。需要更名為gulpfile.babel.js辆床，可以看到這里還是采用babel解釋器的方式來使用es6。
對于別的js代碼桅狠，如果想使用es6的時候讼载，可以使用gulp babel的轉(zhuǎn)碼器轿秧，轉(zhuǎn)成es2015的格式，在瀏覽器上運行咨堤。下面的一個流說明了這個問題菇篡。
let es6ClientScript = lazypipe()
.pipe($.babel, {
presets: ['es2015']
})
.pipe(gulp.dest, paths.buildScriptsDest);
小結(jié)
- yeoman的generator可以方便的幫助我們快速的建立一個骨架工程，例如generator-angular-fullstack一喘，可以生成一個全棧的工程驱还，包括express server，提供mongodb依賴
- gulp是一個非常強大的項目管理工具凸克，可以完成build, test, 注入议蟆，打包，等等功能
- wiredep是一個非常實用的工具触徐，可以方便的注入bower的依賴
思考題
- 文件.bowerrc有什么作用咪鲜？
"strict-ssl": false有什么作用？思考.npmrc有什么作用撞鹉？ - 怎樣理解下面的代碼疟丙？
gulp.task('build', ['clean:dist'], function () {
runSequence(['images', 'copy:extras', 'copy:fonts', 'client:build']);
});
討論：1.文中可以看到，.bowerrc是bower的配置文件鸟雏，可以指定bower的安裝地址享郊，當(dāng)然還可以配置其他項，"strict-ssl": false就是一個例子孝鹊，表示不啟用嚴格的ssl驗證炊琉，在有些時候不能下載包的時候需要考慮關(guān)閉strict ssl。npmrc和bowerrc類似又活，是npm安裝時候的配置苔咪。是一個npmrc的配置，主要解決的是國內(nèi)包下載慢的問題柳骄，前兩個對應(yīng)了phantomjs和node-sass這兩個包在國內(nèi)的鏡像团赏。
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
2.這個一個build任務(wù)，一般情況下是gulp的默認任務(wù)耐薯。在運行build前舔清，可以看到要執(zhí)行clean:dist任務(wù)來做一些清理，可以看到build是依賴于clean:dist的曲初，只有當(dāng)clean:dist執(zhí)行結(jié)束返回的時候build才會啟動体谒；而其中的runSequence是一個gulp插件，表示執(zhí)行一組任務(wù)臼婆，但是其中的任務(wù)沒有嚴格順序抒痒，注意和依賴區(qū)分。
