bower的安裝和使用
使用bower要求先安裝node，請先安裝node。
全局安裝bower
打開cmd，運行命令npm -i -g bower
image.png
創建bower配置文件
控制臺進入你項目所在文件的目錄，執行bower init創建一個bower的配置文件。
image.png
填寫name，其他項可一路回車忽略。
使用bower來安裝AngularJs
執行命令bower install --save angular（記得加上 --save，不然bower默認不添加到配置文件中）
image.png
構建工具需要操作的目錄說明
src:源碼所在目錄
build:存放src中的源碼編譯之后的文件（用于調試）
dist:用于產品發布的目錄（用于部署上線）
全局安裝gulp
命令：npm i -g gulp
image.png
- 使用自動化構建工具的目的：源碼合并（減少http請求）和壓縮（節省帶寬）
- gulp的常用函數：
src(讀取文件和文件夾)
dest(寫文件)
watch(監控文件)
task(定制任務)
pipe(使用流的方式來操縱文件)
初始化一個配置文件
命令：npm init
得到一個名為package.json的配置文件。
在當前目錄下安裝一個gulp（保存到配置文件中）
命令：npm i --save-dev gulp
安裝編寫配置文件要用到的模塊
gulp
gulp-clean
gulp-concat
gulp-connect
gulp-cssmin
gulp-imagemin
gulp-less
gulp-load-plugins
gulp-uglify
open
批量安裝命令：npm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open
image.png
編寫配置文件
1、創建一個名叫gulpfile.js的文件。
2、引入模塊、定義全局變量：
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();//引入這個模塊并實例化，concat、cssmin等模塊就可一并引入，不用一個一個去聲明
var open = require('open');
//聲明一個全局變量
//src目錄：源代碼放置的目錄
//build目錄：整合之后的文件
//dist目錄：用于生產、部署
var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/'
};
3、編寫拷貝第三方資源的任務：
//把第三方依賴拷貝到build和dist目錄下
gulp.task('lib',function(){//task:定制任務，lib是任務名
//src（xxx）：訪問xxx文件
//pipe(gulp.dest(xxx)):把文件拷貝到xxx目錄
//我們用bower下載的第三方依賴文件都默認下載到bower_components文件夾中
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'));
})
4、如何使用？
打開cmd，進入gulpfile.js所在目錄，輸入gulp lib命令：
image.png
可以看到文件夾下多了兩個路徑（build/vendor和dest/vendor），引入的第三方js文件已全部拷貝到這兩個目錄下。
image.png
5、創建src文件夾、操作html、js、less、image文件，需要用到編譯與壓縮：
gulp.task('html',function(){
//app.srcPath是我們開發時的源碼路徑
gulp.src(app.srcPath + '**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath));
})
gulp.task('js',function(){
//$.concat：把所有js代碼合并到一個js文件中
//$.uglify：拷貝到生產環境之前先壓縮
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'));
})
gulp.task('less',function(){
//用一個style/index.less文件引入所有的less文件
//$.less()：編譯less
//$.cssmin()：用于生產環境之前先壓縮一下
gulp.src(app.srcPath + 'style/index.less')
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'));
})
gulp.task('image',function(){
//$.imagemin()：壓縮圖片
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'));
})
6、編寫清除命令（清除測試目錄和發布目錄）：
gulp.task('clean',function(){
gulp.src([app.devPath,app.prdPath])
.pipe($.clean());
})
7、整合一個總的任務
gulp.task('build',['image','js','less','lib','html'])
運行gulp build命令：
image.png
8、編寫啟動服務器的任務：
//啟動一個服務
gulp.task('serve',['build'],function(){//記得引入build，否則啟動服務時不編譯代碼
//root：定義文件路徑
//livereload:true：自動刷新瀏覽器頁面
//port：端口號
$.connect.server({
root:[app.devPath],
livereload:true,
port:1222
});
//打開瀏覽器窗口
open('http://localhost:1222');
//gulp.watch:監控文件變化
gulp.watch(app.srcPath + 'script/**/*.js',['js']);
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath + '**/*.html',['html']);
gulp.watch(app.srcPath + 'image/**/*',['image']);
gulp.watch(app.srcPath + 'style/**/*.less',['less']);
})
9、實現實時刷新瀏覽器頁面：
在js、image、less、lib、html任務后面加上.pipe($.connect.reload())，但是低級瀏覽器不支持（IE8以下）。
10、在cmd中使用gulp serve命令實現自動編譯代碼并啟動瀏覽器：
image.png
啟動瀏覽器成功：
image.png
11、停止：
按Crel+C停止服務：
image.png
配置文件代碼：
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();//引入這個模塊并實例化，concat、cssmin等模塊就可一并引入，不用一個一個去聲明
var open = require('open');
//聲明一個全局變量
//src目錄：源代碼放置的目錄
//build目錄：整合之后的文件
//dist目錄：用于生產、部署
var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/'
};
//把第三方依賴拷貝到build和dist目錄下
gulp.task('lib',function(){//task:定制任務
//src（xxx）：訪問xxx文件
//pipe(gulp.dest(xxx)):把文件拷貝到xxx目錄
//我們用bower下載的第三方依賴文件都默認下載到bower_components文件夾中
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload());
})
gulp.task('html',function(){
//srcPath是我們開發時的源碼路徑
gulp.src(app.srcPath + '**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload());
})
gulp.task('js',function(){
//$.concat：把所有js代碼合并到一個js文件中
//$.uglify：拷貝到生產環境之前先壓縮
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
})
gulp.task('less',function(){
//用一個style/index.less文件引入所有的less文件
//$.less()：編譯less
//$.cssmin()：用于生產環境之前先壓縮一下
gulp.src(app.srcPath + 'style/index.less')
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload());
})
gulp.task('image',function(){
//$.imagemin()：壓縮圖片
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
})
gulp.task('clean',function(){
gulp.src([app.devPath,app.prdPath])
.pipe($.clean());
})
gulp.task('build',['image','js','less','lib','html'])
//啟動一個服務
gulp.task('serve',['build'],function(){
//root：定義文件路徑
//livereload:true：保存源碼后即可自動刷新瀏覽器頁面
//port：端口號
$.connect.server({
root:[app.devPath],
livereload:true,
port:1222
});
//打開瀏覽器窗口
open('http://localhost:1222');
//gulp.watch:監控文件變化
gulp.watch(app.srcPath + 'script/**/*.js',['js']);
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath + '**/*.html',['html']);
gulp.watch(app.srcPath + 'image/**/*',['image']);
gulp.watch(app.srcPath + 'style/**/*.less',['less']);
})
