gulp基础使用总结

gulp 安装

1 检测电脑有没有安装node

执行

$ node  -v
$ npm -v

如果没有安装的话，可以到https://nodejs.org/en/download/下载安装。

2 全局安装gulp

$ npm install --global gulp

3 给对应的项目安装gulp

执行

$ npm install gulp --save-dev

4 初始化项目目录

执行 $ npm init 生成 package.json

在对应的根目录下创建 gulpfile.js

文件中的基本内容为：

var gulp = require('gulp');
gulp.task('default', function() {
  // place code for your default task here
});

运行gulp

$ gulp

安装对应的 package

下面都以less的自动编译功能需求为例子

这里介绍需要的package

gulp-less

gulp的less插件

安装方法：

$ npm install gulp-less

简单使用举例：

var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

常用参数：

paths: 用于@import 指令的路径的数组。

plugins: less插件的数组。举例如下：

less 现在支持plugins，这可以增加额外功能

var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

return gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));

参考网站：

http://lesscss.org/usage/#plugins,

https://www.npmjs.com/package/gulp-less

http://lesscss.org/#using-less-configuration

http://lesscss.org/usage/#plugins

gulp-sourcemaps

gulp-less通常和gulp-sourcemaps一起使用产生对应的文件资源图，这里需要初始化gulp-sourcemaps优先运行gulp-less编译，然后写资源图，例如：

var sourcemaps = require('gulp-sourcemaps');
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./public/css'));

默认情况下，gulp-sourcemaps编写内嵌在被编译的css文件里的资源图，为了将它们写在单独的文件里，可以在sourcemaps.write()里指定相对的文件路径。

var sourcemaps = require('gulp-sourcemaps');
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

gulp-notify

是gulp中基于vinyl文件或者使用节点通知模块的各种电脑操作系统报的错或者发送的信息，给出对应的通知和提醒。

安装：

npm install --save-dev gulp-notify

然后将其放入gulpfile.js

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Hello Gulp!"));

或者：

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Found file: <%= file.relative %>!"));

gulp-plumber

阻止数据流因为其他gulp插件的错误提醒而中断。

安装：npm install --save-dev gulp-plumber

多与上述 gulp-notify中的onError()方法一同出现。

gulp.src("../test/fixtures/*")
      .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }));

参考网站：https://www.npmjs.com/package/gulp-notify

gulp模块的方法

src()

用于产生数据流，可以传入参数，也就是所要处理的文件，参数的写法有：

less/example.less
less/*.less  less文件夹下的所有后缀为less文件
less/**/*.less less目录及其所有子目录中的所有后缀名为less的文件。
!less/example.less 除了example.less以外的所有文件。
*.+(js  css)：匹配项目根目录下，所有后缀名为js或css的文件。

改参数也可以是一个数组，指定多个成员，例如：

gulp.src(['less/*.less','less/*.min.less'])

dest()

该方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。

dest方法还可以接受第二个参数，表示配置对象。

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

配置对象有两个字段。cwd字段指定写入路径的基准目录，默认是当前目录；mode字段指定写入文件的权限，默认是0777

watch()

watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

参考网站：http://javascript.ruanyifeng.com/tool/gulp.html