0%

借助gulp自动化前端开发

gulp是一款小巧的自动化构建工具,可以帮助我们自动运行大量乏味重复性的任务,比如代码压缩、合并等等,可以为我们节约大量的时间。在制作简历过程中,因为需要用到less,而less需要编译,所以就简单学习了这款工具。

安装Gulp.js

因为gulp基于node构建,所以必须先装上node。安装好node后,通过npm来安装gulp

npm install -g gulp

在项目中配置

因为我需要编译less,所以先要安装gulpless插件:

npm install --save-dev gulp gulp-less

命令中的--save-dev可以将安装的包添加到包配置文件package.json中:

"dependencies": {
"gulp": "^3.8.10",
"gulp-livereload": "^3.4.0",
"gulp-less": "^2.0.1",
"less-plugin-autoprefix": "^1.3.0"
  },

如果项目中没有这个文件,可以通过npm init初始化命令来创建。
在项目下的根目录下创建Gulpfile.js文件,这个文件用来定义用到什么插件,执行哪些任务等。
在我制作简历过程中,需要将通过bower管理的两个依赖库复制到特定文件夹下,同时监控并编译less文件。所以配置文件如下:

var gulp = require('gulp'),
less = require('gulp-less');    //引入less插件

// 定义 less 任务
gulp.task('less', function() {
    gulp.src('./less/main.less')
        .pipe(less())
        .pipe(gulp.dest('./style'));
});
//复制文件到特定目录
gulp.task('depends', function() {
    gulp.src(['./bower_components/pagepiling.js/jquery.pagepiling.min.js',
            './bower_components/pagepiling.js/jquery.pagepiling.css'])
        .pipe(gulp.dest('./depends'));
});
//监控less文件,一旦有更改,就执行less编译任务
gulp.task('watch',function(){
    gulp.watch('less/*.less',['less']);
});
//默认任务
gulp.task('default',['less','depends','watch']);

其中:

  • gulp.task()就是定义任务的函数,需要两个参数,一个是任务名,一个是回调函数。
  • gulp.src()是引入文件函数,用来将需要执行的文件路劲引入函数。
  • .pipe()将引入的文件传递给执行函数,比如.pipe(less())gulp.src('./less/main.less')中得文件传递给less()函数。
  • gulp.desk()输出函数,将文件输出到指定目录
  • gulp.watch()监控函数,一旦发现指定文件有了变化,就会执行相应的函数。
如果觉得此文章对你有帮助,可以请我喝咖啡O(∩_∩)O
抹桥 微信支付

微信支付

抹桥 支付宝

支付宝

抹桥 比特币

比特币