创建项目目录
安装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'])
})