bower init 

bower install - - save angular

npm install --global gulp

//引入gulp
var gulp = require('gulp');
//這樣的話 其他的模塊可以直接使用 $ 符號(hào)來(lái)引入
var $ = require('gulp-load-plugins')();
var open = require('open');

//定義目錄路徑
var app = {
 //源代碼，文件目錄
 srcPath: 'src/',
 //文件整合之后的目錄
 devPath: 'build/',
 //項(xiàng)目，發(fā)布目錄上產(chǎn)部署
 prdPath: 'dist/'
};

//通過(guò)bower安裝的插件，需要拷貝到 devPath prdPath中
gulp.task('lib',function(){
 // /**/* 讀取這個(gè)文件夾下邊的所有的文件或者文件夾
 gulp.src('bower_components/**/*')
 //讀取完整后進(jìn)行操作 西安拷貝到整合目錄 并重命名，在拷貝到生產(chǎn)目錄并重命名
 .pipe(gulp.dest(app.devPath + 'vendor'))
 .pipe(gulp.dest(app.prdPath + 'vendor'))
 .pipe($.connect.reload()); //文件更改后自動(dòng)變異 并執(zhí)行啟動(dòng)服務(wù)重新打開(kāi)瀏覽器
});
//將 html 拷貝到 devPath prdPath中
gulp.task('html',function(){
 gulp.src(app.srcPath + '**/*.html')
 .pipe(gulp.dest(app.devPath))
 .pipe(gulp.dest(app.prdPath))
 .pipe($.connect.reload());
});
//將 模擬的json 文件 拷貝到 devPath prdPath中
gulp.task('json',function(){
 gulp.src(app.srcPath + 'data/**/*.json')
 .pipe(gulp.dest(app.devPath + 'data'))
 .pipe(gulp.dest(app.prdPath + 'data'))
 .pipe($.connect.reload());
});

//將 index.less 文件 拷貝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less',function(){
 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());
});
// 拷貝 js 文件 將所有的源文件中的js 文件整合成index.js 然后拷貝過(guò)去
gulp.task('script',function(){
 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());
});

//拷貝 壓縮 圖片 最后放到發(fā)布目錄下
gulp.task('image',function(){
 gulp.src(app.srcPath + 'image/**/*')
 //江源圖片放到整合目錄下，在壓縮放到生產(chǎn)目錄下
 .pipe(gulp.dest(app.devPath + 'image'))
 .pipe($.imagemin())
 .pipe(gulp.dest(app.prdPath + 'image'))
 .pipe($.connect.reload());
});

//總的方法
gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);

//清除舊文件，每次更新的時(shí)候
gulp.task('clean',function(){
 gulp.src([app.devPath,app.prdPath])
 .pipe($.clean());
})

//編寫(xiě)服務(wù)
gulp.task('serve',['build'], function() {
 $.connect.server({
  //服務(wù)起來(lái)的入口
  root: [app.devPath],
  //文件更改后自動(dòng)刷新頁(yè)面
  livereload: true,
  //端口號(hào)
  port: 1234
 });
 // 在 命令工具中執(zhí)行 gulp serve 就相當(dāng)于是啟動(dòng)了服務(wù)
 //自動(dòng)打開(kāi)瀏覽器
 open('http://localhost:1234');
 //我們希望更改了文件，就自動(dòng)編譯，并且打包等然后打開(kāi)瀏覽器
 gulp.watch('bower_components/**/*' , ['lib']);
 //監(jiān)聽(tīng) script 下邊的 js 文件，并執(zhí)行 script 方法
 gulp.watch(app.srcPath + 'script/**/*.js', ['script']);
 gulp.watch(app.srcPath + '**/*.html', ['html']);
 gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
 gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
 gulp.watch(app.srcPath + 'image/**/*', ['image']);
 //這樣文件變更了就會(huì)自動(dòng)構(gòu)建
});
//默認(rèn)執(zhí)行的任務(wù)，直接 執(zhí)行 gulp 變行了。都編寫(xiě)完成后再終端 執(zhí)行 gulp 便可以了。
gulp.task('default', ['serve']);