經常使用的gulp插件

時間  2019-11-12
標籤 經常 使用 gulp 插件 欄目 JavaScript 简体版
原文   原文鏈接

經常使用的gulp插件

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

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

插件搜索：node

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

http://gulpjs.com/plugins/（介紹具體）github

 目錄：web

  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)

 

 

 

 

 

一、自動加載插件 gulp-load-plugins 

安裝：chrome

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

1.一、在package.json裏以下把要安裝的插件名稱 版本寫清楚，npm

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

1.二、在 gulpfile.js裏，運用gulp-load-plugins加載插件json

var gulp = require('gulp');
//加載gulp-load-plugins插件，並立刻運行它
var plugins = require('gulp-load-plugins')();

1.三、運用，當咱們要使用gulp-rename和gulp-ruby-sass這兩個插件的時候，就可使用plugins.rename和plugins.rubySass來代替了,也就是原始插件名去掉gulp-前綴，以後再轉換爲駝峯命名。gulp

 

 

1九、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.二、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.三、gulp-content-includer-合併按模塊引出的html文件

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

 

二、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'));
});

三、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自動重編譯你的文件，當你編輯文件的時候。

 

五、 補全瀏覽器兼容的css(gulp-autoprefixer) 

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

 

八、壓縮js（gulp-uglify）

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

 

十二、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.一、谷歌瀏覽器或火狐安裝livereload插件（谷歌爲.crx文件，火狐爲.xpi文件）
12.二、經過npm安裝http-server ，快速創建http服務

npm install http-server -g 

經過cd找到發佈環境目錄dist

運行http-server，默認端口是8080

訪問路徑localhost:8080

12.三、打開頁面並啓動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);
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程