前端自动化工程构建node,npm,bower,gulp

创建项目目录

安装git，为了在命令行使用，把git配置到环境变量

安装node，windows可以下载安装包

安装bower

bower常用命令：bower init(初始化创建项目时用到)，bower install,bower uninstall

bower配置文件：.bowerrc（路径配置文件，用于修改安装目录）、bower.json（用于管理第三方依赖）

全局安装：

npm i -g bower

到前面创建的项目目录下创建bower配置文件（相应内容根据自己需求填写）：

bower init

局部安装angularjs到你的项目目录下

bower install --save angular

全局安装gulp：npm i -g install gulp

常用api：src(读取文件和文件夹),dest(生成文件或写文件),watch(监控文件),task(定制任务),pipe(以流的方式处理文件)

项目目录下安装gulp及gulp的其他插件

npm i --save-dev install gulp

gulp install gulp-cleangulp-concatgulp-connectgulp-cssmingulp-imagemingulp-lessgulp-load-pluginsgulp-plumbergulp-uglifylodashopen

安装好后开始编写gulp的配置文件

项目目录下创建gulpfile.js配置文件，用于执行gulp任务，注意：回调函数内不能有;分号，否则会出错，内容如下

var gulp = require('gulp'); //引入gulp模块
var $ = require('gulp-load-plugins')(); //引入此模块后之前安装的其他gulp模块就可以用$来引用,后面的()代表实例化
var open = require('open');


var app = { //用来定义目录路径
srcPath: 'src/',//源码目录
buildPath: 'build/',//开发目录
distPath: 'dist/',//生产部署的目录


}

//命令行下输入gulp lib即可以执行任务
gulp.task('lib',function(){ //task方法定义一个名为lib的任务
//任务内容
gulp.src('bower_components/**/*.js')//src读取文件目录下的文件，**/*代表对目录下的所有文件进行深度遍历并读取所有文件
.pipe(gulp.dest(app.buildPath + 'vendor'))//src读取文件后，用.pipe进行操作，dest把文件写到对应目录下
.pipe(gulp.dest(app.distPath + 'vendor'))//dest把文件写到对应目录下
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp html即可以执行任务
gulp.task('html',function(){ //task方法定义一个名为lib的任务
//任务内容
gulp.src(app.srcPath + '**/*.html')//src读取文件目录下的文件，**/*代表对目录下的所有文件进行深度遍历并读取所有文件
.pipe(gulp.dest(app.buildPath))//src读取文件后，用.pipe进行操作，dest把文件写到对应目录下
.pipe(gulp.dest(app.distPath))//dest把文件写到对应目录下
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp less即可以执行任务
gulp.task('less',function(){ //task方法定义一个名为less的任务
//任务内容
gulp.src(app.srcPath + 'css/style.less')//src读取文件目录下的文件
.pipe($.less())//通过$.调用插件方法，编译成css
.pipe(gulp.dest(app.buildPath + 'css'))//src读取文件后，用.pipe进行操作，dest把文件写到对应目录下
.pipe($.cssmin())//通过$.调用插件方法，压缩css
.pipe(gulp.dest(app.distPath + 'css'))//dest把文件写到对应目录下
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp js即可以执行任务
gulp.task('js',function(){
gulp.src(app.srcPath + 'js/**/*.js')//选择对应目录下的所有js文件
.pipe($.concat('common.js'))//合并成common.js
.pipe(gulp.dest(app.buildPath + 'js'))//写入到开发文件目录
.pipe($.uglify())//压缩js
.pipe(gulp.dest(app.distPath + 'js'))//写入到生产目录
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp img即可以执行任务
gulp.task('img',function(){
gulp.src(app.srcPath + 'images/**/*')//选择对应目录下的所有图片
.pipe(gulp.dest(app.buildPath + 'images'))//写入到开发文件目录
.pipe($.imagemin())//压缩图片
.pipe(gulp.dest(app.distPath + 'images'))//写入到生产目录
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp json即可以执行任务
gulp.task('json',function(){ //task方法定义一个名为lib的任务
//任务内容
gulp.src(app.srcPath + 'data/**/*.json')//src读取文件目录下的文件，**/*代表对目录下的所有文件进行深度遍历并读取所有文件
.pipe(gulp.dest(app.buildPath + 'data'))//src读取文件后，用.pipe进行操作，dest把文件写到对应目录下
.pipe(gulp.dest(app.distPath + 'data'))//dest把文件写到对应目录下
.pipe($.connect.reload())//改变后重新加载页面
})

//命令行下输入gulp clean即可以执行任务
gulp.task('clean',function(){
gulp.src([app.buildPath,app.distPath])//选择已打包的文件
.pipe($.clean())//执行清空
})

//一键打包任务
gulp.task('build',['lib','html','less','js','img','json']) //一键执行数组内的任务

//服务器搭建
gulp.task('server',['build'],function(){ //执行gulp server的时候会自动执行build任务，差自动打开浏览器查看页面
$.connect.server({//创建http服务器
root:[app.buildPath],//文件路径
livereload:true,//自动刷新
port:8888 //端口
})
open('http://localhost:8888')//自动打开浏览器

gulp.watch('bower_components/**/*',['lib'])//监制文件，下面全是
gulp.watch(app.srcPath + '**/*.html',['html'])
gulp.watch(app.srcPath + 'js/**/*.js',['js'])
gulp.watch(app.srcPath + 'css/**/*.less',['less'])
gulp.watch(app.srcPath + 'images/**/*',['img'])
gulp.watch(app.srcPath + 'data/**/*.json',['json'])
})