gulp项目构建

bower 的安装，需要nodejs

因为bower就是nodejs编写的，nodejs是他的运行平台。

1. 安装nodejs.

   
   bower安装步骤.png

---

bower的常用指令install 下载， 写在uninstall

卸载时候会把他依赖的库一起卸载 ，

bower常用指令.png

---

gulp安装，

gulp安装.png

---

项目构建。 先下载一个src文件 ， 一个gulpfile,js文件，
gulpfile.js 内容，{

var app = { // 定义目录
srcPath:'src/',
buildPath:'build/',
distPath:'dist/'
}

/1.引入gulp与gulp插件 使用时，要去下载这些插件/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');

/把bower下载的前端框架放到我们项目当中/
gulp.task('lib',function () {
gulp.src('bower_components/*/.js')
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});

/2.定义任务 把所有html文件移动另一个位置/
gulp.task('html',function () {
/要操作哪些文件 确定源文件地址/
gulp.src(app.srcPath+'/.html') /src下所有目录下的所有.html文件/
.pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/3.执行任务 通过命令行。gulp 任务名称/
/定义编译less任务 下载对应的插件 gulp-less

• 把less文件转成css放到build
• /
  gulp.task('less',function () {
  gulp.src(app.srcPath+'style/index.less')
  .pipe(less())
  .pipe(gulp.dest(app.buildPath+'css/'))
  /经过压缩，放到dist目录当中*/
  .pipe(cssmin())
  .pipe(gulp.dest(app.distPath+'css/'))
  .pipe(connect.reload())
  });

/合并js/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/*/.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.buildPath+'js/'))
.pipe(uglify())
.pipe(gulp.dest(app.distPath+'js'))
.pipe(connect.reload())
});

/压缩图片/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/*/')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});

/*同时执行多个任务 [其它任务的名称]

• 当前bulid时，会自动把数组当中的所有任务给执行了。
• */
  gulp.task('build',['less','html','js','image','lib']);

/*定义server任务

• 搭建一个服务器。设置运行的构建目录

• /
  gulp.task('server',['build'],function () {
  /设置服务器/
  connect.server({
  root:[app.buildPath],//要运行哪个目录
  livereload:true, //是否热更新。
  port:8888 //端口号
  })
  /监听哪些任务/
  gulp.watch('bower_components//',['lib']);
  gulp.watch(app.srcPath+'/.html',['html']);
  gulp.watch(app.srcPath+'js//.js',['js']);
  gulp.watch(app.srcPath+'images//',['image']);
  gulp.watch(app.srcPath+'style//.less',['less']);

  //通过浏览器把指定的地址 （http://localhost:9999）
  open('http://localhost:8888');
  });

/*定义默认任务

• 直接执行gulp 会调用的任务
• */
  gulp.task('default',['server']);

---

把已经写好的 gulpfile,js文件放在根目录下面。
使用$npm init -f 创建package.json文件 记录安装的所有插件。

}
src文件下面有三个文件夹 images js style

gulp构建项目步骤.png