zoukankan      html  css  js  c++  java

  • 常用的gulp插件

    常用的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/（介绍具体）

     目录：

    1. gulp-load-plugins：省去手动引用插件的麻烦
    2. gulp-usemin：本文主要讲解的插件 
    3. gulp-rev：添加md5戳
    4. 编译Sass (gulp-ruby-sass)
    5. 补全浏览器兼容的css(gulp-autoprefixer) 
    6. 压缩html(gulp-htmlmin)  https://github.com/muzhen/gulp/tree/master/gulp-htmlmin
    7. 压缩CSS (gulp-minify-css) https://github.com/scniro/gulp-clean-css/edit/master/test/fixtures/test.css
    8. 压缩js（gulp-uglify）
    9. 检查js(gulp-jshint)
    10. 合并文件,拼接 (gulp-concat) https://github.com/muzhen/gulp/tree/master/gulp-concat
    11. 图片压缩 (gulp-imagemin)
    12. 即时重整 ，服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）(gulp-livereload)----
    13. BrowserSync  （livereload的升级版）
    14. 清空文件夹，清理档案，清空目录 (gulp-clean)
    15. 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
    16. 更动通知 (gulp-notify) 
    17. 重命名文件(gulp-rename)   
    18. 模板(gulp-template)
    19. 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插件，空心变成实心即关联上，

     

     其他：

    1. 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);
});
  • 相关阅读:
    获得插入记录标识号, 鼠标移到DataGrid的行更改颜色(转)
    ESRI ArcGIS 9.0系列软件报价(转)
    世界电子地图
    Microsoft’s.NET MicroFramework初接触
    MapServer初体验成功
    MapScript C# Tutorial Programming MapServer in the ASP .NET Framework(转)
    WPF 中的Width 与 ActualWidth
    可空值类型
    面试时遇到上机编程题
    checked、unchecked
  • 原文地址：https://www.cnblogs.com/muzhen/p/5336626.html
Copyright © 2011-2022 走看看