基于gulp的前端自动化环境搭建

创建git目录

新建文件夹webapp，右键git bash here，进入git控制台，输入指令git init，创建一个空的git目录

安装第三方依赖管理工具bower

cnpm install -g bower  //全局安装bowerbower -v //查看bower版本

切换到目录webapp下，输入指令bower init创建bower配置文件，生成bower.json配置文件

如果这里报错提示“bower不是内部或者外部命令“，说明环境变量配置存在问题。
解决方法：如npm安装路径为D:\IDE\NodeJs\node_global\node_modules，需要在系统变量中新增名字为node_path的环境变量，指向D:\IDE\NodeJs\node_global；这样就会报不是内部或外部命令的警告。最后在用户变量的path变量中添加D:\IDE\NodeJs\node_global，重新运行bower，问题解决。

安装angular

bower install --save angular  //添加了--save才会添加到配置文件

若出现“Bower : ENOGIT git is not installed or not in the PATH”，说明git未被安装或者git的环境变量未被添加。
安装完成后，bower.json配置文件中会出现依赖，

"dependencies": {    "angular": "^1.6.2"  }

PS：bower uninstall 用来删除依赖组件

Angular常用调试工具：batarang
主要功能：查看作用域、输出调试信息、性能监控
安装演示：http:pan.baidu.com/s/1jGILtzg

安装gulp

npm install -g gulp //全局安装gulp

切换到webapp目录下，使用npm init初始化项目，会自动添加package.json配置文件和node_modules文件夹。

npm i --save--dev gulp //添加到配置文件，把gulp配置写入package.json文件，

node_modules文件夹中会新增gulp依赖

"devDependencies": {    "gulp": "^3.9.1"  }，

批量安装gulp插件

npm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

安装完成后，在package.json中会新增依赖如下：

"devDependencies": {  "gulp": "^3.9.1",  "gulp-clean": "^0.3.2",  "gulp-concat": "^2.6.1",  "gulp-connect": "^5.0.0",  "gulp-cssmin": "^0.1.7",  "gulp-imagemin": "^3.1.1",  "gulp-less": "^3.3.0",  "gulp-load-plugins": "^1.5.0",  "gulp-uglify": "^2.0.1",  "open": "0.0.5"}

编写gulp子任务

在webapp目录下创建gulpfile.js。

var gulp = require('gulp'); //引入plugin插件，引入后可以用&直接调用以gulp开头的插件，而不需要提前require声明var $ = require('gulp-load-plugins')();//并且在方法后加上双扣号，表示立即调用var open = require('open');var app = {  srcPath: 'src/',   //源代码路径  devPath: 'build/', //整合后的路径，开发路径  prdPath: 'dist/'   //生产环境路径};gulp.task('lib', function(){  gulp.src('bower_components/**/*')    .pipe(gulp.dest(app.devPath + 'vender'))    .pipe(gulp.dest(app.prdPath + 'vender'));});

在cmd命令行中执行 gulp lib, 执行gulp任务lib。
发现会在webapp目录下生成dist和build两个新文件夹，他们的子文件夹vender里面存放着和bower_components文件夹里相同的内容。
这样以后每当bower_components文件夹中的内容发生变化的时候，可以执行lib任务，使得开发环境和线上环境的bower模块内容同步一致。

编写剩余gulp任务

npm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

html任务

创建目录src，在src下创建index.html
创建视图模版目录view，在其中存放视图view的模版

gulp.task('html',function(){  gulp.src(app.srcPath + '/**/*.html')    .pipe(gulp.dest(app.devPath))    .pipe(gulp.dest(app.prdPath));});

json任务

在src下创建data目录，里面存放用来模拟后台数据的json文件

gulp.task('json',function(){  gulp.src(app.srcPath + 'data/**/*.json')    .pipe(gulp.dest(app.devPath + 'data'))    .pipe(gulp.dest(app.prdPath + 'data'));});

css任务

在src下创建style文件夹，里面存放less文件。
只需要index.less文件作为入口，其他的子less文件的引用 通过在index.less中使用@import来实现。

gulp.task('css', function(){  gulp.src(app.srcPath + 'style/index.less')    .pipe($.less())//因为有gulp-load-plugins插件，可以直接用$.less调用gulp-less插件    .pipe(gulp.dest(app.devPath + 'css'))    .pipe($.cssmin())//因为有gulp-load-plugins插件，可以直接用$.less调用gulp-cssmin插件    .pipe(gulp.dest(app.prdPath + 'css'))//传入到线上路径之前先压缩css});

js任务

在src目录下创建script文件夹，里面存放所有的js文件

gulp.task('js', function(){  gulp.src(app.srcPath + 'script/**/*.js')    .pipe($.concat('index.js'))//通过gulp-concat插件将所有js文件合并成一个index.js    .pipe(gulp.dest(app.devPath + 'js'))    .pipe($.uglify())//流入线上环境路径之前，压缩js代码    .pipe(gulp.dest(app.prdPath + 'js'));});

image任务

在src目录下创建image文件夹，用来存放图片
PS：icon图标类文件最好制作成sprite雪碧图，或者base64调用

gulp.task('image', function(){  gulp.src(app.srcPath + 'image/**/*')    .pipe(gulp.dest(app.devPath + 'image'))    .pipe($.imagemin())//流入线上环境路径之前，压缩image图片    .pipe(gulp.dest(app.prdPath + 'image'));});

clean任务

每次发布的时候，可能需要把之前目录内的内容清除，避免旧的文件对新的内容有所影响。
需要在每次发布前删除dist和build目录

gulp.task('clean', function(){  gulp.src([app.devPath, app.prdPath])  //同时清除编码环境和线上环境的目录内容    .pipe($.clean());});

build总任务

这样在每次构建的时候，只需要执行build总任务就可以，会把build任务数组内的任务执行一遍

gulp.task('build',['image','js','css','json','lib','html']);

serve任务

目的：一个serve任务启动服务，并监听端口，在文件内容发生变化的时候，自动刷新浏览器。
任务的总入口 通过gulp serve（gulp）指令调用，会调用build任务

gulp.task('serve', ['build'], function() {//serve任务中引入build任务  $.connect.server({  //启动一个服务器    root: [app.devPath], //服务器从哪个路径开始读取，默认从开发路径读取    livereload: true, //每当写完之后自动刷新浏览器，只支持高版本浏览器    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']);});  //为实现构建完成后，刷新浏览器，进行实时预览，  // 需要在每个任务最后添加.pipe($.connect.reload());  gulp.task('default', ['serve']);  //控制台使用gulp命令，就会调用default任务  //这里设定的default任务是serve，即gulp等同于gulp serve。