自动化构建工具gulp

我们知道一个前端的项目做好之后，还要考虑项目的请求网络的效率，那么前端自动化的工具可以帮助我们在完成项目之后做一些高效的处理，比如现在自动化的工具有gulp、webpack、grunt等等，今天自己总结了一下自己工作中常用的gulp的用法

1.gulp安装

1.全局安装gulp

1	npm install -g gulp

2.局部安装，在项目的开发总使用

1	npm install gulp --save-dev

2.在根项目中创建gulpfile.js文件

var gulp = require('gulp');
//第一个参数是任务名，default是默认任务名，运行gulp时可以直接gulp,不用在gulp default。
//如果要执行特定的任务的化,那么就要 `gulp taskName`
//第二个参数是依赖的任务名
gulp.task('default',[])

3.运行gulp

在命令行中输入: gulp 即可

4.gulp中的常见的API或者插件

//清空
var clean = require('gulp-clean');

// 定义idleading
var transport = require('gulp-seajs-transport');

// 合并包
var concat = require('gulp-seajs-concat');

// 压缩
var uglify = require('gulp-uglify');

// 清空原来的东西
gulp.task('clean', function(){
  return gulp.src('./public/dist')
    .pipe(clean());
})

gulp.task('seajsmodule',['clean'],function(){
  //专门处理自己定义的模块化的资源
  gulp.src('./public/scripts/**/*.js')
    .pipe(transport({
      idleading:'/dist/' //给idleading前面添加的前缀,主要是为了项目的路径正确
    }))
    .pipe(concat())//合并
    .pipe(uglify())//压缩
    .pipe(gulp.dest('./public/dist')) //构建之后所放的路径的地方

})
//第一个参数：任务名
//第二个参数：依赖的任务
gulp.task('default',['seajsmodule']);

//可以设置监视
gulp.task("es_compile",function(){
    gulp.watch("./public/scripts/**/*.js",['default'])
})
//运行 gulp es_compile