自动化工具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>