自動化工具gulp搭建環境(詳解）

src:讀取文件和文件夾       dest:生成文件（寫文件）       watch:監控文件       task:定製任務         pipe:以流的方式處理文件

bower的安裝和使用

使用bower要求先安裝node，請先安裝node。

全局安裝bower 打開cmd，運行命令

npm -i -g bower

建立bower配置文件 控制檯進入你項目所在文件的目錄，執行bower init建立一個bower的配置文件。

填寫name，其餘項可一路回車忽略。

使用bower來安裝AngularJs 執行命令

bower install --save angular（記得加上 --save，否則bower默認不添加到配置文件中）

（.pipe($.connect.reload())//實現文件改變，自動刷新頁面的功能，ie不支持）

1.安裝gulp

cnpm install -g gulp

2.初始化配置文件(package.json)，爲了後面安裝nodejs模塊

npm init

3.在當前文件夾下，項目文件夾根目錄下，安裝模塊

cnpm install --save-dev gulp 

(要裝的模塊)
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.5.0",
"gulp-cssmin": "^0.1.7",
"gulp-imagemin": "^3.4.0",
"gulp-less": "^3.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.2.0",
"gulp-uglify": "^2.1.2",
"open": "^0.0.5"

4.建立gulpfile.js在根目錄

5.在gulpfile.js中引入模塊

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

6.在gulpfile.js中寫入文件存放位置

var app = {
  srcPath: 'src/',  //源代碼目錄
  devPath: 'build/',//存放src中的源碼編譯以後的文件（用於調試）   開發環境
  prdPath: 'dist/'  //用於產品發佈的目錄（用於部署上線）　　　　　 生產環境
};

7.將源代碼文件中文件拷貝到其餘目錄下

gulp.task('lib', function() {             //定義一個lib任務
  gulp.src('bower_components/**/*.js')    //讀取bower_components下的全部.js文件
  .pipe(gulp.dest(app.devPath + 'vendor'))//操做(將文件拷貝到app.devPath + 'vendor'下)
  .pipe(gulp.dest(app.prdPath + 'vendor'))//操做(將文件拷貝到app.prdPath + 'vendor'下)
  .pipe($.connect.reload());
});

gulp.task('html', function() {            //定義一個html任務
  gulp.src(app.srcPath + '**/*.html')     //讀取app.srcPath下的全部.html文件
  .pipe(gulp.dest(app.devPath))           //操做(將文件拷貝到app.devPath下)
  .pipe(gulp.dest(app.prdPath))           //操做(將文件拷貝到app.prdPath)
  .pipe($.connect.reload());
})

8.less文件的處理（index.less）,引入全部的less文件到index.less

@import 'template/head.less';
@import 'template/foot.less';
@import 'template/positionList.less';
@import 'template/positionInfo.less';
@import 'template/company.less';
@import 'template/positionClass.less';
@import 'template/tab.less';

9.在gulpfile.js中處理less文件

gulp.task('less', function() {                 //定義一個less任務
  gulp.src(app.srcPath + 'style/index.less')   //讀取app.srcPath下的'style/index.less'文件
  .pipe($.plumber())                           //
  .pipe($.less())                              //編譯
  .pipe(gulp.dest(app.devPath + 'css'))        //編譯完成以後放到app.devPath + 'css'目錄下
  .pipe($.cssmin())                            //壓縮css文件
  .pipe(gulp.dest(app.prdPath + 'css'))        //壓縮完成以後放到app.prdPath + 'css'目錄下
  .pipe($.connect.reload());
});

10.在gulpfile.js中處理js文件,（無需建立index.js）

gulp.task('js', function() {                   //定義一個js任務
  gulp.src(app.srcPath + 'script/**/*.js')     //讀取app.srcPath + 'script/'下的全部.js文件
  .pipe($.plumber())
  .pipe($.concat('index.js'))                  //將全部js文件合併到index.js下面
  .pipe(gulp.dest(app.devPath + 'js'))         //操做(將文件拷貝到app.devPath下的js文件夾)
  .pipe($.uglify())                            //壓縮js文件
  .pipe(gulp.dest(app.prdPath + 'js'))         //操做(將文件拷貝到app.prdPath下的js文件夾)
  .pipe($.connect.reload());
});

11.在gulpfile.js中處理image文件

gulp.task('image', function() {
  gulp.src(app.srcPath + 'image/**/*')
  .pipe($.plumber())
  .pipe(gulp.dest(app.devPath + 'image'))
  .pipe($.imagemin())                          //壓縮圖片文件
  .pipe(gulp.dest(app.prdPath + 'image'))
  .pipe($.connect.reload());
});

12.爲了防止原來的bulid和dist目錄下的文件有衝突，全部要清空掉這兩個目錄下的文件

gulp.task('clean', function() {                //定義一個clean任務       
  gulp.src([app.devPath, app.prdPath])         //
  .pipe($.clean());                            //刪除app.devPath, app.prdPath目錄下的文件
});

13.建立一個總的任務，將以前的任務都放進去，能夠不用一個一個的執行

//總任務，定義任務build，將'image', 'js', 'less', 'lib', 'html', 'json'放入，
//只要執行build任務就能夠執行全部的任務
gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);

14.建立一個服務，讓瀏覽器訪問到

15.實現文件變更自動編譯功能

gulp.task('serve', ['build'], function() {   //定義一個serce任務
  $.connect.server({                         //啓動服務器
    root: [app.devPath],                     //服務器讀取路徑
    livereload: true,                        //自動刷新瀏覽器，ie不支持，
    port: 3000                               //端口
  });

  open('http://localhost:3000');             //服務器網址

　　//watch監控文件，若是文件改動，達到自動編譯
　　gulp.watch('bower_components/**/*', ['lib']);
　　gulp.watch(app.srcPath + '**/*.html', ['html']);
　　gulp.watch(app.srcPath + 'data/**/*.json', ['json']);//後端數據，真實項目能夠不用這個
　　gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
　　gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
　　gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

16.直接使用gulp命令就能夠執行serve任務

gulp.task('default', ['serve']);   //將server放進去，這樣能夠，直接用gulp，就能夠執行serve

文件夾目錄

在源碼文件夾script下面新建app.js

'use strict';

angular.module('app', ['ui.router', 'ngCookies', 'validation', 'ngAnimate']);

在源碼文件夾下面新建index.html(這裏的引入都是看dist目錄放置)

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>webapp</title>
  <link rel="stylesheet" href="/css/index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <!-- 指令ui-view就是路由要放置的地方 -->
  <div ui-view>
    
  </div>

    
  <script type="text/javascript">
    document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
  </script>
  <script src="vendor/angular/angular.min.js" charset="utf-8"></script>
  <!-- 引入路由插件 -->
  <script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
  <script src="vendor/angular-cookies/angular-cookies.min.js" charset="utf-8"></script>
  <script src="vendor/angular-validation/dist/angular-validation.js" charset="utf-8"></script>
  <script src="vendor/angular-animate/angular-animate.min.js" charset="utf-8"></script>
  <script src="js/index.js" charset="utf-8"></script>
</body>
</html>