bower init 

bower install - - save angular

npm install --global gulp

//引入gulpvar gulp = require('gulp');//這樣的話 其他的模塊可以直接使用 $ 符號來引入var $ = require('gulp-load-plugins')();var open = require('open');//定義目錄路徑var app = { //源代碼，文件目錄 srcPath: 'src/', //文件整合之后的目錄 devPath: 'build/', //項目，發布目錄上產部署 prdPath: 'dist/'};//通過bower安裝的插件，需要拷貝到 devPath prdPath中gulp.task('lib',function(){ // /**/* 讀取這個文件夾下邊的所有的文件或者文件夾 gulp.src('bower_components/**/*') //讀取完整后進行操作 西安拷貝到整合目錄 并重命名，在拷貝到生產目錄并重命名 .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe($.connect.reload()); //文件更改后自動變異 并執行啟動服務重新打開瀏覽器});//將 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引入了所有的其他的lessgulp.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 然后拷貝過去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());});//拷貝 壓縮 圖片 最后放到發布目錄下gulp.task('image',function(){ gulp.src(app.srcPath + 'image/**/*') //江源圖片放到整合目錄下，在壓縮放到生產目錄下 .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']);//清除舊文件，每次更新的時候gulp.task('clean',function(){ gulp.src([app.devPath,app.prdPath]) .pipe($.clean());})//編寫服務gulp.task('serve',['build'], function() { $.connect.server({  //服務起來的入口  root: [app.devPath],  //文件更改后自動刷新頁面  livereload: true,  //端口號  port: 1234 }); // 在 命令工具中執行 gulp serve 就相當于是啟動了服務 //自動打開瀏覽器 open('http://localhost:1234'); //我們希望更改了文件，就自動編譯，并且打包等然后打開瀏覽器 gulp.watch('bower_components/**/*' , ['lib']); //監聽 script 下邊的 js 文件，并執行 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']); //這樣文件變更了就會自動構建});//默認執行的任務，直接 執行 gulp 變行了。都編寫完成后再終端 執行 gulp 便可以了。gulp.task('default', ['serve']);