gulp

時間 2019-11-09

標籤 gulp 欄目 JavaScript 简体版

原文原文鏈接

npm install -g gulp // 全局安裝gulp 是爲了執行 gulp 任務
npm install gulp --save-dev // 本地安裝gulp 是爲了調用 gulp 插件 -css

// -save：將保存配置信息至package.json -dev：保存至package.json的devDependencies節點，
// 不指定-dev將保存至 dependencies 節點；通常保存在dependencies的像這些express/ejs/body-parser等等
// 保存到 package.json 其餘人 npm install 則會下載所須要的包; npm install --production只下載dependencies節點的包 html

npm init 輸入name等信息,生產 package.json文件，該文件也能夠手動生成。
entry point 輸入主文件名 gulpfile.js

1.把less 編譯成css
npm install gulp-less --save-dev git

2. 新建 gulpfile.js 文件
var gulp = require('gulp'),
less = require('gulp-less'); // 引入 gulp-less

// 定義任務名稱
gulp.task('testLess',function(){
gulp.src('src/less/index.less') // 指定less 文件
.pipe(less())
.pipe(gulp.desc('src/css')); // 在src/css下生成 css 文件
});

gulp.task('default',['testLess'],['otherTask']); // 把上面的任務都添加到這裏，批量執行。

命令行：gulp 或 gulp default 則執行任務es6

gulp 4.0github

// 圖片壓縮 
gulp.task('minify-images', () => {
  return gulp.src('./src/assets/images/**/*')
    .pipe(minifyImage({
      optimizationLevel: 3,  //類型：Number  默認：3  取值範圍：0-7（優化等級）
      progressive: true,     //類型：Boolean 默認：false 無損壓縮jpg圖片
      interlaced: true       //類型：Boolean 默認：false 隔行掃描gif進行渲染
    }))
    .pipe(gulp.dest('dist/assets/images'))
})

gulp4.0完整版 20170823web

gulp4.0安裝
npm install gulpjs/gulp#4.0 -g // 全局安裝 
建立文件夾，
npm init -y 生成package.json
npm install gulpjs/gulp#4.0 --save-dev

新建gulpfile.js 

var gulp = require('gulp')
gulp.task('copy',function () {
  return gulp.src('./src/config/**/*')   // 「**」：匹配0個或多個子文件夾    例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；
    .pipe(gulp.dest('./dist/config'))  // gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入
})

gulp.task('default', gulp.parallel('copy'));   // 4.0要使用 series（按順序執行） 和 parallel（並行）

控制檯 gulp 運行

gulp4.0 清空文件夾、複製文件、刪除文件ajax

var gulp = require('gulp')
var del = require('del')

// 清空文件夾
function cleanFile() {
  return del([
    'dist/*'
  ])
}
// 複製文件夾
function copyFile() {
  return gulp.src('./test/**/*')
    .pipe(gulp.dest('./dist/test'))
}
//刪除test多餘文件
function delFile() {
  return del([
    'dist/test/css/*.map',
    'dist/test/images/details'
  ])
}
gulp.task('default', gulp.series(cleanFile,copyFile,delFile));

gulp4.0入門express

gulp3.0

// default任務，須要依賴scripts和styles
gulp.task('default', ['scripts', 'styles'], function() {...});

// script折styles任務都依賴clean
gulp.task('styles', ['clean'], function() {...});
gulp.task('scripts', ['clean'], function() {...});

// clean任務用來清空目錄
gulp.task('clean', function() {...});


======================


gulp4.0

gulp.series 按順序執行
gulp.parallel 並行執行
gulp --tasks 查看細節

demo04:{
    gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));
    gulp.task('default').description = "This is the default task and it does certain things";

    function styles() {...}
    function scripts() {...}
    function clean() {...}
    //  能夠單獨運行任務
    // gulp.task(styles); 
    // 添加註釋
    // gulp.task(styles).description='註釋'
}

gulp.src 接收的文件匹配字符串會順序解釋，因此你能夠寫成這樣 gulp.src(['*.js', '!b*.js', 'bad.js'])（排除全部以 b 開頭的 JS 文件可是除了 bad.js）

【實操】 複製文件3種寫法，推薦demo03
demo01:{
    var gulp = require('gulp')
    gulp.task('copy',function () {
      return gulp.src('./src/config/!**!/!*')   // 「**」：匹配0個或多個子文件夾    例：src/!**!/!*.js(包含src的0個或多個子文件夾下的js文件)；
        .pipe(gulp.dest('./dist/config'))  // gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入
    })
    gulp.task('default', gulp.parallel(copy));
}

demo02:{
    var gulp = require('gulp')
    function copy(callback) {
      gulp.src('./src/config/**/*')
        .pipe(gulp.dest('./dist/config'))
        .on('finish',callback)   // 添加callback和 .on()
    }
    gulp.task('default', gulp.parallel(copy));
}
demo03:{
    var gulp = require('gulp')
    function copy() {
      return gulp.src('./src/config/**/*')
        .pipe(gulp.dest('./dist/config'))
    }
    gulp.task('default', gulp.parallel(copy));
}
刪除文件 
npm install del --save-dev 
demo07:{
    var gulp = require('gulp')
    function clean() {
      return del([
        'src/config/*.html',  // 刪除文件
        '!src/config/0.html'  // 不要刪除這個文件 
      ])
    }
    gulp.task('default', gulp.parallel(copy));
}

gulp-if  條件判斷 
gulp-uglify 壓縮

壓縮文件 
var uglify=require('gulp-uglify');
function copy(callback) {
  gulp.src('./src/config/**/*.js')
    .pipe(uglify())   //壓縮
    .pipe(gulp.dest('./dist/config'))
    .on('finish',callback)
}


gulp-concat  拼接
gulp-rename  重命名

文件夾生成單獨一個文件
http://www.gulpjs.com.cn/docs/recipes/running-task-steps-per-folder/

View Code

gulp-uglify js壓縮，默認混淆閉包內的內部變量npm

gulp-uglify 默認混淆閉包內的內部變量  

(function(){
  var a = 10;
  var b = 100;
  function add(a,b) {
    return a+b
  }
  console.log(add(a, b));
})()


.pipe(uglify({ mangle: { toplevel: true }}))     gulp-uglify 強制混淆代碼,跨文件的變量調用可能會出錯。

View Code

js壓縮混淆關鍵點 window.Test=Testjson

(function () {
  var Test = function (name, age) {
    if(!this instanceof Test) return new Test(name,age)
    this.name=name;
    this.age=age;
  }
  Test.prototype={
    getName:function () {
      return this.name + ' haha';
    }
  }
  window.Test=Test  // 把對象賦值給window屬性，不能引用時， new Test(), 會報錯Test undefined
})()

gulp 自動刷新、文件合併、引入公共頭部、引入配置文件

gulp 自動刷新 
npm install -g browser-sync

使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"
browser-sync start --server --files "src/**/*" // 監控src下的任意目錄的全部文件 


gulp 文件合併 
npm install -g gulp-concat --save-dev
gulp css壓縮
npm install gulp-clean-css --save-dev
var cssmin = require('gulp-clean-css');

// css合併壓縮去註釋
function cssMergeCompress() {
  var url = './src/assets/css/';
  return gulp.src([url+'ccc.css',url+'b.css']) // 自定義合併順序，  gulp.src(url+'*.css') 按文件名字母順序
    .pipe(concat('index.css')) // 合併後的名字
    .pipe(cssmin())  // 壓縮去註釋
    .pipe(gulp.dest('./dist/assets/css'))
}

gulp.task(cssMergeCompress)  // 單獨任務

gulp 引入html 
npm install -g gulp-html-import

var htmlImport = require('gulp-html-import')
// 引入公共頭部
function importHtml() {
  return gulp.src('./src/index.html')
    .pipe(htmlImport('./src/assets/common/'))  // 引入common文件夾下的header.html footer.html
    .pipe(gulp.dest('dist'))
}

index.html 文件 
@import "header.html"
<div>this is body..</div>
@import "footer.html"   // 必須用引雙號，單引號無效



配置文件處理

config.js
module.exports={
  local:{
    api: 'http://localhost:3000/banner',
    apiId:'本地配置參數'
  },
  test:{  // 測試環境
    api:'xxx.com/banner',
    apiId:'測試配置參數'
  },
  prod:{  // 生產環境
    api:'xxx.com/banner',
    apiId: '生產環境參數'
  }
}

a.js
var api = 'localApi'
var appId = 'localAppId'
$.ajax({
  url:api+'xxx/xxx',
  beforeSend:function (xhr) {
    xhr.setRequestHeader("appId", appId);
  }
})


var config = require('./src/assets/config/config.js')   引入配置文件  
var replace = require('gulp-replace')     //  指定字符串替換
// 引入配置文件
function configImport() {
  console.log(config.local.api);
  return gulp.src('src/assets/js/a.js')
    .pipe(replace('localApi',config.local.api))
    .pipe(replace('localAppId',config.local.apiId))
    .pipe(gulp.dest('dist'))
}
gulp.task(configImport)

View Code

gulp 自動刷新二

var gulp = require('gulp');
var browserSync = require('browser-sync'),   // 自動刷新
  reload = browserSync.reload;
// server
function server() {
  browserSync.init({
    port:9000,
    server:{
      baseDir: 'dist',
      index:'index.html'
    }
  })
  gulp.watch('*.html',myHtml)   // 複製代碼
  gulp.watch('dist/**/*').on('change',reload)  // 刷新頁面
}
// html
function myHtml() {
  return gulp.src('*.html')
    .pipe(gulp.dest('dist'))
}
gulp.task('default',gulp.series(myHtml,server))  // 不用單引號！！！

View Code

gulp 自動刷新、監聽、html、css、js較完整版

var gulp = require('gulp');
var browserSync = require('browser-sync'),   // 自動刷新
  reload = browserSync.reload;
var changed = require('gulp-changed');
var cssmin = require('gulp-clean-css');
var concat = require('gulp-concat');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var babel = require('gulp-babel');
var url = './chedai_pc/assets/';
var uglify = require('gulp-uglify');
// server
function server() {
  browserSync.init({
    port:9000,
    server:{
      baseDir: 'dist',
      index:'index.html'
    }
  })
  gulp.watch('*.html',myHtml)   // 複製代碼
  gulp.watch(url+'css/*.css',cssMergeCompress)  // css
  gulp.watch(url+'less/*.less',lessMergeCompress)  // less
  gulp.watch(url+'less/*.less',lessCss)   // less->css
  gulp.watch(url+'js/index.js',jsCompress)   // js
  gulp.watch('dist/**/*').on('change',reload)  // 刷新頁面
}

// html
function myHtml() {
  return gulp.src('*.html')
    .pipe(changed('dist'))
    .pipe(htmlmin({
      collapseWhitespace: true,   // 壓縮成了一行
      removeComments: true   //  去註釋
    }))
    .pipe(gulp.dest('dist'))
}
// css合併壓縮去註釋
function cssMergeCompress() {
  return gulp.src(url+'css/*.css') // 自定義合併順序，  gulp.src(url+'*.css') 按文件名字母順序
    .pipe(concat('index.css')) // 合併後的名字
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/chedai_pc/assets/css'))
}
// less合併壓縮去註釋
function lessMergeCompress() {
  return gulp.src(url+'less/*.less')
    .pipe(less())
    .pipe(concat('index.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/chedai_pc/assets/css'))
}
// 先less -> css 再合併css
function lessCss() {
  gulp.src(url+'less/*.less')
    .pipe(less())
    .pipe(concat('less.css'))
    .pipe(gulp.dest(url+'css/'))
  return gulp.src(url+'css/*.css')
    .pipe(concat('index.css')) // 合併後的名字
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/chedai_pc/assets/css'))
}
// js   混淆壓縮
function jsCompress() {
  return gulp.src(url+'js/index.js')
    // .pipe(babel())   // web端 不用 es6吧
    .pipe(uglify())
    .pipe(gulp.dest('dist/chedai_pc/assets/js/'))
}
// gulp.task('default',gulp.series(myHtml,cssMergeCompress,lessCss,server))  // 不用單引號！！！
gulp.task('default',gulp.series(myHtml,lessCss,jsCompress,server))  // 不用單引號！！！

gulp.task(jsCompress)

View Code

gulp es6 babel轉換須要 .babelrc配置文件詳見 babelrc文章

var babel = require('gulp-babel')
function es6() {
  return gulp.src('src/assets/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'))
}
gulp.task(es6)

View Code

.babelrc

{
    "presets":[
        ["stage-3"],
        ["env",{
            "targets":{
                "browsers":["ie 6-8"]  // 詳見  babelrc文章
            }
        }]
        ],
    "plugins":[["transform-runtime",{
        "helpers": false, // defaults to true
        "polyfill": false, // defaults to true
        "regenerator": true, // defaults to true
        "moduleName": "babel-runtime"
    }]]
}

View Code

須要的package.json

"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-stage-3": "^6.24.1",
"gulp-babel": "^6.1.2",

gulp 用到的package.json 備註

"devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",  // babel
    "babel-preset-env": "^1.4.0",                // babel
    "babel-preset-stage-2": "^6.24.1",           // babel 注意 stage 1 2 3 4
    "browser-sync": "^2.18.13",                  //  自動刷新
    "gulp": "github:gulpjs/gulp#4.0",            //  gulp4.0
    "gulp-babel": "^6.1.2",                      // gulp-babel 插件
    "gulp-changed": "^3.0.0",                    // 操做 修改過的文件
    "gulp-clean-css": "^3.0.4",                  // 壓縮css
    "gulp-concat": "^2.6.1",                     // 文件合併，並命名
    "gulp-htmlmin": "^3.0.0",                    // html壓縮去註釋
    "gulp-less": "^3.3.2",                       // less 編譯
    "gulp-uglify": "^3.0.0",                     // js 混淆壓縮
    "del": "^3.0.0",                             // 刪除文件、文件夾
    "gulp-html-import": "0.0.2",                 // 引入公共html 頭部、尾部
    "gulp-replace": "^0.6.1"                     // 指定字符串替換  配置api
  }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。