做一个及格的前端，gulp自动化构建东西入门教程

2019年8月24日 136次阅读 来源: 痞子猫

我的新作看法网
http://www.guandn.com (
看法网是一个猎获新颖、收成学问、重在独立思考的网站)，它前端js、css的紧缩、兼并、md5定名等就应用了gulp自动化构建手艺，gulp很玲珑应用起来很惬意。

ps：接下来我会一一开源看法网开辟过程当中的前后端手艺，如：lucene全文索引、自定义富文本编辑器、图片上传紧缩水印等等。

一、什么是gulp

gulp是一个自动化构建东西,开辟者能够应用它在项目开辟过程当中自动实行罕见使命。比方：css、js的兼并与紧缩（削减http要求，减少文件大小）、html紧缩、md5名天生与替代（平常处置惩罚浏览器缓存）、线上设置文件自动替代、搭建当地web服务器做到及时革新等。

二、环境搭建

gulp是基于Node.js的插件东西

  1. 搭建Node.js环境：https://nodejs.org/en/download/ 下载响应体系的node装置包。进入终端：键入：node -v假如涌现node版本号，则node.js装置胜利。

《做一个及格的前端，gulp自动化构建东西入门教程》

  1. 装置gulp：

（1）、装置全局gulp：终端键入：npm install gulp -g 守候完成；
（2）、cd进入到项目根目次 –>:终端键入：npm init 【天生node.js插件治理json文件：package.json】：如图：
《做一个及格的前端，gulp自动化构建东西入门教程》
【注：如图赤色箭头、一起enter即可（每一项的意义都很明白，无需诠释！我只是提一下license选项，这一项是开源协定：一般的开源协定有：GPL、Apache License、 BSD、ISC.. 等等，有兴致的能够参考：开源协定

（3）、键入：npm install gulp –save-dev 装置gulp到当前目次，守候装置完成。键入gulp-v 涌现全局版本，和当前版本，装置完成。如图：
《做一个及格的前端，gulp自动化构建东西入门教程》

键入:gulp，涌现：“No gulpfile fount”，说明前三步实行胜利。

(4)、从上面提醒能够看出，运转gulp须要gulpfile文件。故而：在当前文件夹新建文件：gulpfile.js备用。
《做一个及格的前端，gulp自动化构建东西入门教程》

三、gulpfile.js文件编写（重点）

在gulpfile.js中写入：

var gulp = require("gulp"); //说明gulp变量
gulp.task("start",function(){
    console.log("痞子猫**************");
});

终端键入：gulp start 实行gulp中的start使命，涌现打印，说明gulpfile.js编写没什么题目！如图：
《做一个及格的前端，gulp自动化构建东西入门教程》

下面最先进入正题，
紧缩、兼并等这些操纵能够依托gulp插件完成：插件装置敕令：npm install [module] –save-dev ;

如：npm install gulp-concat –save-dev 这是装置兼并插件。应用以下：

var gulp = require("gulp"); //说明gulp变量
var concat = require('gulp-concat'); // require：加载插件，参数为：插件名

//兼并使命
gulp.task("concat",function(){ //concat为使命名，运转gulp concat实行此使命。
    return gulp.src("./js/*.js")  //须要兼并的js目次，支撑正则
            .pipe(concat("all.js")) //concat(),兼并操纵，参数：兼并后的名字
            .pipe(gulp.dest("./js/")) //兼并后放入的目次
});

终端键入：gulp concat 实行此使命。

这就是一个简朴的兼并使命，前面提到了node是基于流，也就是管道操纵的。gulp.src（）管道的进口，pipe()获得处置惩罚管道中的数据，pipe(gulp.dest())处置惩罚后数据的出口。说别了就是一个流水线操纵。

一切的gulp插件应用也就是这个套路了：经常使用插件鸠合：
1.gulp-sass(sass编译)
2.gulp-compass(sass编译)
3.gulp-autoprefixer(增加CSS3前缀)
4.gulp-clean-css(紧缩CSS)
5.gulp-include（文件包含）
6.gulp-concat(文件兼并)
7.del(文件删除)
8.gulp-uglify(紧缩js)
9.gulp.spritesmith(合成雪碧图)
10.run-sequence(行列实行)
11.browser-sync(浏览器同步革新)
12.gulp-babel(js编译)
13.gulp-imagemin(图片紧缩)
gulp-imageisux(腾讯智图紧缩，慎用)
imagemin-jpegtran(jpg图片紧缩)
imagemin-pngquant(png图片紧缩)
gulp-image-resize(图片大小调解)
14.gulp-rename(重定名)
15.gulp-live-server(轻量服务器)
16.gulp-livereload
17.gulp-util(东西集)
18.require-dir(引入悉数文件夹文件)
19.connect-livereload(热更新同步)
20.gulp-if(是不是运转插件)
21.gulp-plumber
22.gulp-eslint(eslint代码搜检)
23.gulp-htmlmin(html紧缩)
24.gulp-clean(删除文件/文件夹)
25.gulp-less
26.gulp-load-plugins(加载gulp插件)

再次强调装置插件敕令：npm install [module] –save-dev

至于应用我以为没啥可说的：就拿罕见的举个例子吧：

del：形貌：删除：

var del = require('del');
del('./dist');                      // 删除悉数dist文件夹

gulp-rename：形貌：重定名文件。

var rename = require("gulp-rename");  
  
gulp.src('./hello.txt')  
  .pipe(rename('gb/goodbye.md'))    // 直接修正文件名和途径  
  .pipe(gulp.dest('./dist'));   
   
gulp.src('./hello.txt')  
  .pipe(rename({  
    dirname: "text",                // 途径名  
    basename: "goodbye",            // 主文件名  
    prefix: "pre-",                 // 前缀  
    suffix: "-min",                 // 后缀  
    extname: ".html"                // 扩展名  
  }))  
  .pipe(gulp.dest('./dist'));

gulp-filter：形貌：在假造文件流中过滤文件。

var filter = require('gulp-filter');  
  
const f = filter(['**', '!*/index.js']);  
gulp.src('js/**/*.js')  
    .pipe(f)                        // 过滤掉index.js这个文件  
    .pipe(gulp.dest('dist'));  
  
const f1 = filter(['**', '!*/index.js'], {restore: true});  
gulp.src('js/**/*.js')  
    .pipe(f1)                       // 过滤掉index.js这个文件  
    .pipe(uglify())                 // 对其他文件举行紧缩  
    .pipe(f1.restore)               // 返回到未过滤实行的一切文件  
    .pipe(gulp.dest('dist'));       // 再对一切文件操纵，包含index.js

gulp-uglify：形貌：紧缩js文件大小。

var uglify = require("gulp-uglify");  
  
gulp.src('./hello.js')  
    .pipe(uglify())                 // 直接紧缩hello.js  
    .pipe(gulp.dest('./dist'))  
      
 gulp.src('./hello.js')  
    .pipe(uglify({  
        mangle: true,               // 是不是修正变量名，默以为 true  
        compress: true,             // 是不是完整紧缩，默以为 true  
        preserveComments: 'all'     // 保留一切解释  
    }))  
    .pipe(gulp.dest('./dist'))

gulp-csso：形貌：紧缩优化css。

var csso = require('gulp-csso');  
  
gulp.src('./css/*.css')  
    .pipe(csso())  
    .pipe(gulp.dest('./dist/css'))

gulp-html-minify：形貌：紧缩HTML。

var htmlminify = require('gulp-html-minify');  
  
gulp.src('index.html')  
    .pipe(htmlminify())  
    .pipe(gulp.dest('./dist'))

gulp-imagemin：形貌：紧缩图片。

var imagemin = require('gulp-imagemin');  
  
gulp.src('./img/*.{jpg,png,gif,ico}')  
    .pipe(imagemin())  
    .pipe(gulp.dest('./dist/img'))

gulp-autoprefixer：形貌：自动为css增加浏览器前缀。

var autoprefixer = require('gulp-autoprefixer');  
  
gulp.src('./css/*.css')  
    .pipe(autoprefixer())           // 直接增加前缀  
    .pipe(gulp.dest('dist'))  
  
gulp.src('./css/*.css')  
    .pipe(autoprefixer({  
        browsers: ['last 2 versions'],      // 浏览器版本  
        cascade：true                       // 美化属性，默许true  
        add: true                           // 是不是增加前缀，默许true  
        remove: true                        // 删除过期前缀，默许true  
        flexbox: true                       // 为flexbox属性增加前缀，默许true  
    }))  
    .pipe(gulp.dest('./dist'))

其实在枚举没啥意义，都是一个套路，想相识谁人插件的参数、应用要领等，直接上https://www.npmjs.com/ 上面查询吧！

注意事项：
src进口婚配说明：

  • app.js 准确婚配
  • *.js 能婚配js后缀的文件
  • */.js 能婚配多级目次下的js文件（也包含当前目次下）
  • !js/app.js 准确消除

return说明
不加return返回，默许异步实行；加上return意义很明白，就是守候流处置惩罚完毕~可做同步处置惩罚使命前提

默许使命说明
只需使命名字为default，当运转gulp时是可省略使命名实行，直接键入：gulp

使命依靠说明

gulp.task("task1",function(){
    //
});
gulp.task("task2",["task1"],function(){
    //
});

如上代码：task2依靠于task1，也就是说守候task1使命完毕后再实行

同步实行说明
gulp默许悉数使命为异步实行，其实在现实场景许多须要同步操纵：如:拷贝-紧缩操纵，必需拷贝完成才紧缩。
故而引荐一种简朴的要领处置惩罚同步题目：应用插件：gulp-sequence

var gulp = require("gulp"); //说明gulp变量
var gulpSequence = require('gulp-sequence'); //同步实行模块
gulp.task("task1",function(){
    return xxx //具体使命
});
gulp.task("task2",function(){
     return xxx  //具体使命
});
gulp.task("task3",function(){
     return xxx  //具体使命
});
//如许可保证，task1-》task2-》task3的实行递次，使命必需return，已诠释缘由
gulp.task("default",function(callback){gulpSequence("task1",
            "task2",
            "task3",
            callback);
});

啥？你不想看这么多！那也简朴~
1、装置node
2、实行 npm install gulp -g
3、复制下面代码到：package.json（新建）

{
  "name": "guandn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-html-minify": "0.0.14",
    "gulp-htmlmin": "^4.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.2.4",
    "gulp-sequence": "^1.0.0",
    "gulp-smushit": "^1.2.0",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.4",
    "merge-stream": "^1.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/quzhuanpanDesigner/guandn.git"
  },
  "author": "broom",
  "license": "ISC"
}

4、实行：npm install 【依据package.json装置插件】
5、复制下面代码到：gulpfile.js（新建）

var gulp = require("gulp"); //说明gulp变量

var del = require('del'); //删除模块
var fs = require("fs");  //文件操纵模块
var concat = require('gulp-concat'); // 拼接东西

var uglify = require('gulp-uglify'); // 紧缩js东西
var minifyCss = require('gulp-minify-css'); // 紧缩css东西
var miniHtml = require("gulp-html-minify"); //紧缩html/jsp

var smushit = require('gulp-smushit'); //无损紧缩jpg、png图片

var rev = require('gulp-rev');       // 加md5后缀的东西
var revCollector = require('gulp-rev-collector'); //与rev配合应用

var useref = require('gulp-useref'); // 替代文件中的链接的东西,平常与gulp-rev配合应用
var gulpSequence = require('gulp-sequence'); //同步实行模块
var mergeStream = require("merge-stream");  //兼并多个stream

//资本设置
var config={
    dist:"./dist/guandn/",   //目的目次
    target:'./target/guandn/',  //资本
}

//MD5舆图json地点
var revJsonConfig = {
    js:'./rev/rev-manifest-js.json',
    css:'./rev/rev-manifest-css.json',
    base:'./rev/'
}

//js紧缩参数
var uglifyConfig = {
        mangle: false,//范例：Boolean 默许：true 是不是修正变量名
        compress: true,//范例：Boolean 默许：true 是不是完整紧缩
    }

var    Util = {
        fetchScripts: function (readFile, basePath) { //文件操纵东西，获得须要兼并的js
            var sources = fs.readFileSync(readFile);
            sources = /\[([^\]]+\.js'[^\]]+)\]/.exec(sources);
            sources = sources[1].replace(/\/\/.*\n/g, '\n').replace(/'|"|\n|\t|\s/g, '');
            sources = sources.split(",");
            console.log("搜刮js兼并地点：读取文件： "+readFile);
            sources.forEach(function (filepath, index) {
                sources[ index ] = basePath + filepath;
                console.log("地点：" + basePath + filepath);
            });

            return sources;
        },
        fetchStyles: function (readFile, basePath) {  //文件操纵东西，获得须要兼并的css
            var sources = fs.readFileSync(readFile),
                filepath = null,
                pattern = /@import\s+([^;]+)*;/g,
                src = [];
            console.log("搜刮css兼并地点：读取文件： "+readFile);
            while (filepath = pattern.exec(sources)) {
                src.push(basePath + filepath[ 1 ].replace(/'|"/g, ""));
                console.log("地点：" + basePath + filepath[ 1 ].replace(/'|"/g, ""));
            }
            return src;
        }
    };


gulp.task("copy",function(){
    console.log("拷贝代码到dist************************")
    return gulp.src(config.target+"/**/*").
                pipe(gulp.dest(config.dist));
});
gulp.task("del",function(){
    console.log("删除dist、rev目次************************")
    return del([config.dist,revJsonConfig.base]);
});

//兼并使命
gulp.task("combine",function(){
    
    console.log("兼并使命最先************************")
    var commonJs = Util.fetchScripts(config.dist+"media/common.app.js", config.dist+"media/");
    var commJsStream =  gulp.src(commonJs)
        .pipe(concat("common.app.js"))
        .pipe(uglify()) //紧缩
        .pipe(rev())    //加名字MD5
        .pipe(gulp.dest(config.dist+"media/")) //保留
        .pipe(rev.manifest({ //天生MD5舆图
            path: revJsonConfig.js,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
    
    var commonCss = Util.fetchStyles(config.dist + "media/common.app.css", config.dist + "media/");
    var commCssStream = gulp.src(commonCss)
        .pipe(concat("common.app.css"))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest(config.dist+"media/"))
        .pipe(rev.manifest({
            path: revJsonConfig.css,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
    
    var pluginsJs = Util.fetchScripts(config.dist+"media/plugins/plugin.common.app.js", config.dist+"media/plugins/");
    var pluginJsStream = gulp.src(pluginsJs)
        .pipe(concat("plugin.common.app.js"))
        .pipe(uglify())
        //.pipe($.rev())
        .pipe(gulp.dest(config.dist+"media/plugins/"))
        //.pipe($.rev.manifest({
        //    path: revJsonConfig.js,
        //    merge: true
        //})) 
        //.pipe(gulp.dest("./"));
    
    var pluginCss = Util.fetchStyles(config.dist + "media/plugins/plugin.common.app.css", config.dist+"media/plugins/");
    var pluginCssStream = gulp.src(pluginCss)
        .pipe(concat("plugin.common.app.css"))
        .pipe(minifyCss())
        //.pipe($.rev())
        .pipe(gulp.dest(config.dist+"media/plugins/"))
        //.pipe($.rev.manifest({
        //    path: revJsonConfig.css,
        //    merge: true
        //})) 
        //.pipe(gulp.dest("./"));
    
    //兼并编辑器
    var guandnEditor = Util.fetchScripts(config.dist+"media/plugins/guandnEditor/editor.commbine.min.js", config.dist+"media/plugins/");
    var editor = gulp.src(guandnEditor)
        .pipe(concat("editor.commbine.min.js"))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest(config.dist+"media/plugins/guandnEditor/"))
        .pipe(rev.manifest({
            path: revJsonConfig.js,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
        
        
    //兼并上传插件
    var guanzhi = Util.fetchScripts(config.dist+"media/plugins/jQuery-File-Upload-master/js/jquery.fileuplaod.all.min.js", config.dist+"media/plugins/")
    var guanzhiFileUulpad = gulp.src(guanzhi)
            .pipe(concat("jquery.fileuplaod.all.min.js"))
            .pipe(uglify(uglifyConfig))
            .pipe(gulp.dest(config.dist+"media/plugins/jQuery-File-Upload-master/js/"))
    return mergeStream(commJsStream,commCssStream,pluginJsStream,pluginCssStream,editor,guanzhiFileUulpad);
});


//紧缩js，css
gulp.task("compress",function(callback){
    console.log("紧缩使命最先***************************")
    var compressCss = gulp.src([config.dist+"media/**/*.css","!**/*.min.css","!**/plugins/**/*"])
        .pipe(minifyCss())
        .pipe(gulp.dest(config.dist+"media/"));    
    var compressJs = gulp.src([config.dist+"media/**/*.js","!**/*.min.js","!**/plugins/**/*"])
        .pipe(uglify(uglifyConfig))
        .pipe(gulp.dest(config.dist+"media/"));
    
    return mergeStream(compressCss, compressJs);
});

//静态文件替代
gulp.task("replaceJC", function(){
    console.log("替代静态文件**************************");
    var revJson = revJsonConfig.base+"**/*.json";
    var commonCss = gulp.src([revJson, config.dist+"media/css/common/*.jsp"])  
        .pipe(revCollector({  
            replaceReved: true 
        }))
        .pipe(gulp.dest(config.dist+"media/css/common/"));
        
    var commonJs = gulp.src([revJson, config.dist+"media/js/common/*.jsp"])  
        .pipe(revCollector({  
            replaceReved: true 
        }))
        .pipe(gulp.dest(config.dist+"media/js/common/"));
    
    var editor = gulp.src([revJson, config.dist+"WEB-INF/pages/**/*.jsp"])  
    .pipe(revCollector({  
        replaceReved: true 
    }))
    .pipe(gulp.dest(config.dist+"WEB-INF/pages/")); 
            
    return mergeStream(commonCss, commonJs);
});

//可异步实行操纵【末了操纵】
gulp.task("asyn", function(){
    console.log("紧缩jsp、拷贝设置**********************************")
//    gulp.src(config.dist+"WEB-INF/pages/**/*.jsp")
//        .pipe(miniHtml({
//            empty: true  //删除空格
//        }))
//        .pipe(gulp.dest(config.dist + "WEB-INF/pages/"));
    
    //图片紧缩（费时操纵）
//    gulp.src(config.dist+'media/img/**/*')
//        .pipe(smushit({
//            verbose: true
//        }))
//        .pipe(gulp.dest(config.dist+'media/img/'));
});

gulp.task("finishedDel",function(){
    return del([revJsonConfig.base]);
});

gulp.task("default",function(callback){
    gulpSequence("del",
            "copy",
            "combine",
            "compress",
            "replaceJC",
            "finishedDel",
            "asyn",
            callback);
});

6、修正gulpfile中的途径，文件等.

至此gulp的基础应用已没啥题目了！
PS:gulp进修材料，gulp插件大鸠合：https://segmentfault.com/a/11…

    原文作者：痞子猫
    原文地址: https://segmentfault.com/a/1190000012904063
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞