Zerlinda's Blog

前端自动化之gulp使用

说到前端自动化,不得不提到Gulp,虽然在前端技术各种多元发展的如今(grunt更早一些,webpack貌似比较流行),你的项目可能用不到gulp,但是俗话说技多不压身嘛。gulp能够优化你的前端工作流程。比如自动刷新页面、压缩css、js、编译less等等。而且gulp的配置和安装都相当简单,通过安装相应的gulp插件,在文件中正确配置各种插件的使用,就可以把以前需要手工做的事情(比如合并js,压缩js)全部自动做完。同样可以实现实时监控打包的工作,听起来真的很方便!

这里如何通过npm安装gulp和其他插件就不多赘述。你可以在package.json中配置gulp的依赖项通过npm install安装,同时也可以npm install gulp-minify-css –save-dev单独一个个的安装。

11

首先简单介绍Gulp的四个api,工欲善其事,必先利其器,基础自然最重要。

gulp.src() 表示文件的来源 或者说是读取文件

gulp.dest() 表示通过管道的文件输出 也就是输出文件

gulp.task() 表示要执行的任务

gulp.watch() 表示要监听的任务,监听文件一旦发生改变,相应任务开始执行。

首先要使用gulp,先要安装后引入gulp及插件:

12

以下定义一个json数组,也就是项目中所有src中引用的文件路径,*代表所有文件(是不是讲的太基础了些哈哈哈),接下来要对这些文件进行相应的处理。

13

Gulp可以让你随心所欲自定义各种任务,以便对不同文件做不同的处理(js压缩啦,编译less啦)。当你在终端执行gulp任务的时候,默认执行的是defalt任务,所以你可以在defalt中定义自己的任务:

15

通常在开发中习惯把defalt作为开发任务,最终打包的文件用来测试开发。

当然你可以定义其他任务,然后任务之间可以相互调用。对于task在实际项目中的使用并没有自己规定一个特别规范的写法(诸如return之类^_^),以下的task直接写在function中是可以正常执行的。

16

显而易见,在watch任务中监视js_work路径下的文件,一旦文件发生变化,立即执行js-path任务。注入的文件通过.pipe()流中进行相应的处理(任务就比较多了^_^)。

17

以上gulp的介绍差不多了,基本的使用方法很简单,并且当你在熟悉gulp这种构建方法之后简直一通百通。当然使gulp发挥作用的更多在于正确使用gulp的相关插件。介绍几个简单的插件:

gulp-concat    合并文件

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp-sourcemaps   生成sourcemaps,用来在浏览器中调试自己写的less\sass\stylus,能够在开发中工具定位

内联源地图嵌入到源文件中。

var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

在sourcemaps.init()和sourcemaps.write 之间的插件必须支持gulp-sourcemaps()。你可以在维基百科中找到插件的详细列表。

gulp-uglify   压缩js

gulp-clean   清除文件,当css,img,js出现删除操作的时候,虽然watch会监听,但是并不会删除相应文件。所以你需要手动更新删除。

gulp-postcss   最强大的功能提供各种插件来处理css,autoprefixer是其中最出名的一种

autoprefixer 通过配置文件根据当前浏览器的普及度以及属性支持提供给你前缀(-moz- -webkit-等)

gulp-less    编译less

gulp-sass    编译sass

gulp-minify-css   压缩css

gulp-order           按顺序合并js

gulp-strip-debug   清除console.,alert

gulp的插件有很多,以上都可以在github上找到更多插件以及更详细的使用方法,这里就不做搬运工啦。

最后附个人一个使用gulp的小项目,angular项目演示,在实际项目中你会体验中gulp的强大之处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注