gulp实现自动化构建项目

首先，先来设定一个简单的需求：

• 一个本地开发环境，具备监控文件变化并实时更新的功能
• 修改代码，保存之后浏览器自动刷新
• 实时编译各种预编译格式文件
• 压缩合并静态资源，打包输出
• 部署上传

搭建环境

1.首先新建一个项目文件夹,并从控制台进入该文件夹

2.初始化项目

注：初始化项目 npm init ,然后回车回车回车···yes，就会在项目中默认创建一个package.json的文件
vim package.json

3.项目源码创建

4.编译打包 gulp来构建项目 browser-sync实现浏览器自动刷新功能

安装gulp
npm install -g gulp
mac：
sudo npm install -g gulp password：xxx
5.新建一个gulpsile.js

控制台输：

从控制台可以看到输出的 this is a test 构建成功。
利用gulp创建任务并执行

然后执行
gulp build 就可以一次性执行多个任务

/*gulp是以定义并执行一个个任务的形式来工作的流程管理工具*/

//gulpfile.js
var gulp = require('gulp');

//创建任务，分别处理把js，css，html文件放到dist/static目录下，把html文件放到dist下：

//css
gulp.task('css',function () {
    return gulp.src('src/css/*.css')
    .pipe(gulp.dest('dist/static'))
})

//js
gulp.task('js',function () {
    return gulp.src('src/js/*.js')
    .pipe(gulp.dest('dist/static'))
})

//html
gulp.task('html',function () {
    return gulp.src('src/tpl/*.html')
    .pipe(gulp.dest('dist'))
})

gulp.task('build',['css','js','html'])