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