常用的gulp插件

gulp API：http://www.gulpjs.com.cn/docs/api/

gulp中文API：http://www.ydcss.com/archives/424

插件搜索：

https://www.npmjs.com/confirm-email/IVEnvYi-ejc6vmEynQRIK4TwV9L0Nz7ZN2Rcz31x（全）

http://gulpjs.com/plugins/（介绍具体）

目录：

gulp-load-plugins：省去手动引用插件的麻烦
gulp-usemin：本文主要讲解的插件
gulp-rev：添加md5戳
编译Sass (gulp-ruby-sass)
补全浏览器兼容的css(gulp-autoprefixer)
压缩html(gulp-htmlmin) https://github.com/muzhen/gulp/tree/master/gulp-htmlmin
压缩CSS (gulp-minify-css) https://github.com/scniro/gulp-clean-css/edit/master/test/fixtures/test.css
压缩js（gulp-uglify）
检查js(gulp-jshint)
合并文件,拼接 (gulp-concat) https://github.com/muzhen/gulp/tree/master/gulp-concat
图片压缩 (gulp-imagemin)
即时重整，服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）(gulp-livereload)----
BrowserSync （livereload的升级版）
清空文件夹，清理档案，清空目录 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)
重命名文件(gulp-rename)
模板(gulp-template)
markdown 编辑工具(gulp-markdown)

1、自动加载插件 gulp-load-plugins

安装：

npm install --save-dev gulp-load-plugins

1.1、在package.json里如下把要安装的插件名称版本写清楚，

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

1.2、在 gulpfile.js里，运用gulp-load-plugins加载插件

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

1.3、运用，当我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。

19、gulp-file-include

gulp-file-include提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项，详细可以去看看 gulp-file-include。

参考文档：

https://github.com/muzhen/gulp/tree/master/gulp-file-include【by muzhen】

https://www.npmjs.com/package/gulp-file-include

http://blog.csdn.net/leo8729/article/details/50358581

新建：

package.json文件

安装

npm install gulp

npm install gulp --save-dev

npm install gulp-file-include –save-dev

文件目录

|-node_modules
|-src // 生产环境的 html 存放文件夹
    |-include // 公共部分的 html 存放文件夹
    |-*.html 
|-dist // 编辑后的 html 文件

新建gulpfile.js

var gulp = require('gulp');
var fileinclude  = require('gulp-file-include');

gulp.task('fileinclude', function() {
    gulp.src('src/**.html')
        .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
    .pipe(gulp.dest('dist'));
});

接着新建两个html文件，分别是头部和底部：

header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

　　<h1>这是 header 的内容</h1>

footer.html

　　<h1>这是 footer 的内容</h1>

</body>
</html>

最后在新建一个html，把要用到的header和footer给include进来。

layout.html

    @@include('include/header.html')

    <p> 这是 layout 的内容 </p>

    @@include('include/footer.html')

在命令行中输入 gulp fileinclude

编译完成之后，到dist目录一下有一个layout.html的文件，这就是最后编译出来的。

19.2、gulp-ejs

功能和上面的差不多，分离那些公共部分的html文件

参考文档：

http://blog.csdn.net/leo8729/article/details/50358581

http://www.ydcss.com/archives/34

新建：

package.json文件

安装：

npm install gulp --save-dev
npm install gulp-ejs --save-dev

新建gulpfile.js

var gulp = require('gulp');
var ejs  = require('gulp-ejs');

gulp.task('ejs', function() {
    gulp.src('src/**.ejs')
        .pipe(ejs())
    .pipe(gulp.dest('dist'));
});

接着和上面的一样，新建两个html文件，分别是头部和底部

新建layout.ejs文件

    <%-include include/header  %>

    <p> 这是 layout 的内容 </p>

    <%-include include/footer  %>

1.3、gulp-content-includer-合并按模块引出的html文件

参考：http://www.myexception.cn/HTML-CSS/2011495.html

2、gulp-less

参考文档：

http://www.ydcss.com/archives/34

https://github.com/muzhen/gulp/tree/master/gulp-less【by muzhen】

介绍：

使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息

具体使用：

http://www.ydcss.com/archives/34

安装：

 cnpm install gulp-less --save-dev

新建gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
 notify = require('gulp-notify'),
 plumber = require('gulp-plumber');

 
gulp.task('testLess', function () {

　 gulp.src('src/less/*.less')

.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) //出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。

　　　　 .pipe(less())

　　　　 .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css以及detail.css

});

gulp.task('testWatch', function () {

gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务

});

   //编译单个less文件
 gulp.src('src/less/index.less')

//多个文件以数组形式传入
gulp.src(['src/less/index.less','src/less/detail.less'])

　　//编译src目录下的所有less文件
    //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
    gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less'])

//编译less后压缩css

var gulp = require('gulp'),
    less = require('gulp-less'), 
    cssmin = require('gulp-minify-css');
 
gulp.task('testLess', function () {
    gulp.src('src/less/index.less')
        .pipe(less())
        .pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))
        .pipe(gulp.dest('src/css'));
});

3、Gulp-ruby-sass

gulp-ruby-sass基于ruby和sass，编译Sass文件为 CSS文件。
特点：比gulp-sass，但是更稳定，功能更丰富。

安装：

$ npm install --save-dev gulp-ruby-sass

需要先安装Ruby和Sass,如果你是OSX和Linux系统可能已经有Ruby，你可以在终端使用ruby -v测试。当你确定Ruby已安装，运行gem install sass 安装Sass。

使用：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('default', function () {
    return gulp.src('src/scss/app.scss') //增加你需要编译的文件
        .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
        .pipe(gulp.dest('dist/css'));
});

使用gulp-watch自动重编译你的文件，当你编辑文件的时候。

5、补全浏览器兼容的css(gulp-autoprefixer)

http://www.ydcss.com/archives/94

8、压缩js（gulp-uglify）

http://www.ydcss.com/archives/54

12、gulp-livereload（实时刷新）

介绍：

gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力

具体使用介绍：

http://www.ydcss.com/archives/702

http://ofcss.com/2014/05/03/gulp-as-a-development-web-server-zh_cn.html

12.1、谷歌浏览器或火狐安装livereload插件（谷歌为.crx文件，火狐为.xpi文件）
12.2、通过npm安装http-server ，快速建立http服务

npm install http-server -g

通过cd找到发布环境目录dist

运行http-server，默认端口是8080

访问路径localhost:8080

12.3、打开页面并启动livereload浏览器插件，点击chrome上的LiveReload插件，空心变成实心即关联上，

其他：

requireDir

var requireDir = require('require-dir');

// Require all tasks in gulp/tasks, including subfolders
requireDir('./gulp/tasks', { recurse: true });

任务：

default.js

var gulp = require('gulp');

gulp.task('default', ['watch']);

deploy.js

var gulp = require('gulp');

/**
 * Start rsync task
 */
gulp.task('deploy', ['rsync']);

publish.js

var gulp = require('gulp');

/**
 * Run task browsersync:production
 */
gulp.task('publish', ['browsersync:production']);

browser-sync.js

var gulp        = require('gulp');
var browsersync = require('browser-sync');
var config      = require('../../config').browsersync.production;

/**
 * Start a server and watch changes with BrowserSync
 */
gulp.task('browsersync:production', ['build:production'], function() {
  browsersync(config);
});

posted on 2017-04-10 16:42 目珍阅读(1248) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

目珍