前端自动化构建工具gulp的使用记录

记录于20180428--Json

达到目标

• 编译代码
• 合并代码
• 压缩代码
• 压缩图片
• 等

开始使用

1. 全局安装gulp模块
   npm install -g gulp
2. 项目安装gulp
   npm install gulp --save
3. 新建gulpfile.js 文件
   在项目更目录下新建gulpfile.js 文件

常用方法

* gulp.task    --  定义任务

gulp.task("任务名",function(){
//要执行的任务
});
* gulp.src -- 找到需要执行任务的文件
gulp.task("任务名",function(){
gulp.src("文件路径")
.pipe(gulp.dest('dist/'));
});
* gulp.dest -- 执行任务的文件的去处
gulp.task("任务名",function(){
gulp.src("文件路径")
.pipe(gulp.dest('dist/'));
});
* gulp.watch -- 观察文件是否发生变化

几个例子

• 倒入模块
  var uglify = require("gulp-uglify");
• 定义任务

  gulp.task("minify",function(){
  gulp.src("src/js/*.js")
  .pipe(uglify())
  .pipe(gulp.dest("dist"))
  })

几个模块

图片压缩模块--- gulp-imagemin
代码压缩模块--- gulp-uglify
代码合并模块--- gulp-concat

合并代码

var concat = require('gulp-concat');
var uglify = require('gulp-gulify');
gulp.task("name",function(){
gulp.src('src/js/*.js') //来源
.pipe(concat("main.js")) //合并
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')) //输出
})

执行多个任务

gulp.task('default',['任务01','任务02','任务03','任务04'])

监听文件变化

gulp.watch('需要监听的文件的路径',['文件变化需要执行的任务'])；