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
  }