gulp

作为任务自动管理工具,是目前前端工程化提高效率非常有用的一环。以前觉得许多实用的功能webpack都有,也没怎么去研究,今天还是玩了下。

why gulp:我觉得唯一的原因是,gulp的使用够简单,能处理常见任务,帮我们实现项目构建的自动化。

安装:先npm全局安装gulp,再在项目文件夹npm本地安装gulp,即可在gulpfile.js配置文件中调用gulp。

npm install -g gulp
npm install --save-dev gulp

使用:和其他前端工具一样,当我们写好位于项目根目录的gulpfile.js配置文件后,只需要命令行输入gulp taskName(taskName是自定义的任务名),就会自动执行gulp中我们定义的任务。

//示例
var gulp = require('gulp');      //引入gulp
var uglify = require('gulp-uglify');  //引入gulp-uglify,用来压缩代码
var concat = require('gulp-concat');  //引入gulp-concat,用来合并代码
gulp.task('base',function(){
	return gulp.src('./src/*.js')   //从src目录中获取该录下所有js文件,产生数据流
	.pipe(uglify())                 //上一步的数据流作为输入,压缩,再输出
	.pipe(concat('all.js'))         //上一步的数据流作为输入,合并成一个all.js
	.pipe(gulp.dest('build'));      //上一步的数据流作为输入,将all.js写入到名为build的文件夹里
});

写完gulpfile.js后,在项目文件夹命令行工具输入:

gulp base

就会自动执行任务,生成/build/all.js。

gulp定义任务的一般格式如上。当项目复杂时,我们可能需要定义多个任务。从上面的例子我们可以看出,gulpfile配置文件在引入gulp和相关工具函数后,主要是下面4个步骤:

  gulp.task(str,function) :通过task方法定义一个任务,参数1是任务名,参数2是封装了特定操作的函数,即任务。

  gulp.src(path) :通过src方法获取源文件,产生数据流,供后续步骤操作。

  .src()之后用连缀的写法执行.pipe(fn())对上一步的数据流执行中间件操作。

  gulp.dest(path):将上一步的数据流写入指定文件夹中。

所以,gulp的任务流,其实就是借用了管道的思想,在管道中对数据流一次次进行操作,最后输出处理过后的文件。

其中,gulp.src(path)的路径参数可以有下面4种写法:

    js/app.js:指定确切的文件名

    js/*.js:某个目录所有后缀名为js的文件。

    js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。

    !js/app.js:除了js/app.js以外的所有文件。

上例中,.task | .src | .dest 三个函数是gulp的方法,gulp还有一个watch方法,用来监听目标文件:

gulp.task('watch', function () { 
  gulp.watch('templates/*.tmpl.html',['build']); //第二个参数是任务名数组 
});

命令行输入gulp watch之后,一旦templates目录中的.tmlp.html模板文件发生改动,就会执行build任务。


写gulp配置文件本身非常简单,真正出彩之处在于2点:

一是gulp的管道思想,让我们可以非常方便地管理任务。

二是gulp的各种插件,让我们使用工具函数一步步对项目文件进行定制操作。


附上几个看到的挺有用的插件:

    gulp-cssnano或gulp-minify-css:压缩css文件

    gulp-load-plugins:引入并执行后返回项目package.json所有gulp模块,如下:

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

    gulp-sass:对sass文件进行预处理

    gulp-imagemin:压缩图片

    gulp-useref:将html页面中的script标签的js按顺序合并

    run-sequence:按顺序执行任务:

gulp.task('task-name', function(callback) { 
  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback); 
});

    gulp-autoprefixer:自动添加样式前缀

    del:清除文件


遇到的问题:

1.如果命令行输入gulp taskName执行后没报错,但是没有生成预期的结果文件,应该是定义任务时路径有问题。

2.gulp执行时默认只能接受ES5语法,如果代码文件用了ES6,要先在gulp任务里用babel转ES5,再执行后续的压缩合并。


参考:

使用gulp 进行ES6开发

Gulp:任务自动管理工具

gulp的使用以及Gulp新手入门教程

Gulp入门教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值