资讯专栏INFORMATION COLUMN

做一个合格的前端,gulp自动化构建工具入门教程

yunhao / 2213人阅读

摘要:我的新作观点网观点网是一个猎获新奇收获知识重在独立思考的网站,它前端的压缩合并命名等就使用了自动化构建技术,很小巧使用起来很舒服。一什么是是一个自动化构建工具开发者可以使用它在项目开发过程中自动执行常见任务。故而在当前文件夹新建文件备用。

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考的网站),它前端js、css的压缩、合并、md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服。
ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。

一、什么是gulp

gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。例如:css、js的合并与压缩(减少http请求,缩小文件大小)、html压缩、md5名生成与替换(一般解决浏览器缓存)、线上配置文件自动替换、搭建本地web服务器做到实时刷新等。

二、环境搭建

gulp是基于Node.js的插件工具

搭建Node.js环境:https://nodejs.org/en/download/ 下载相应系统的node安装包。进入终端:键入:node -v如果出现node版本号,则node.js安装成功。

安装gulp:

(1)、安装全局gulp:终端键入:npm install gulp -g 等待完成;
(2)、cd进入到项目根目录 -->:终端键入:npm init 【生成node.js插件管理json文件:package.json】:如图:

【注:如图红色箭头、一路enter即可(每一项的意义都很明确,无需解释!我只是提一下license选项,这一项是开源协议:通常的开源协议有:GPL、Apache License、 BSD、ISC.. 等等,有兴趣的可以参考:开源协议

(3)、键入:npm install gulp --save-dev 安装gulp到当前目录,等待安装完成。键入gulp-v 出现全局版本,和当前版本,安装完成。如图:

键入:gulp,出现:“No gulpfile fount”,说明前三步执行成功。

(4)、从上面提示可以看出,运行gulp需要gulpfile文件。故而:在当前文件夹新建文件:gulpfile.js备用。

三、gulpfile.js文件编写(重点)

在gulpfile.js中写入:

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

终端键入:gulp start 执行gulp中的start任务,出现打印,说明gulpfile.js编写没什么问题!如图:

下面开始进入正题,
压缩、合并等这些操作可以依靠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(///.*
/g, "
").replace(/"|"|
|	|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 = /@imports+([^;]+)*;/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://www.ucloud.cn/yun/92583.html

相关文章

  • 一个合格前端gulp资源大集合

    摘要:承接前一篇做一个合格的前端,自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术,如全文索引自定义富文本编辑器图片上传压缩水印等等。 承接前一篇《做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网:http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

    Baoyuan 评论0 收藏0
  • 黑马前端v7(含Vue3.0小兔鲜儿电商项目)完整代码下载

    摘要:没有过时,它仍然是前端基础的一部分。但无论如何,同时掌握和才是合格的前端同学。。前端综合协议跨域通信安全问题浏览器渲染机制异步和单线程页面性能优化防抖动和节流阀前端错误监控虚拟等。另外,前端常见的有两个和。是的标准,是的超集。 2021已完结​​Download:百度网盘​​提取码:k4H5​前端技术知识汇总:1、HTML...

    senntyou 评论0 收藏0
  • 前端构建初步尝试

    摘要:前言这篇文章的主要目的是告诉大家构建工具可以做那些事情大家不必去深入研究这个东西最基本的是有个概念什么是前端构建在平时我们浏览一些大型的站点会发现其中的一些经过压缩去掉了空白符注释经过了混淆和压缩一些引用的文件的链接会加上奇怪的字串文件例如 前言 这篇文章的主要目的是告诉大家,构建工具可以做那些事情.大家不必去深入研究这个东西.最基本的是有个概念. 什么是前端构建? 在平时我们浏览一些...

    Keven 评论0 收藏0
  • 如何打造一个令人愉悦前端开发环境(一)

    摘要:我觉得这方面的原因是当时对和的依赖,导致大家对的兴趣不弄,错过了最佳时机,这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过,说新的构建工具就是的构建工具。 文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS、超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html、css、js三板斧之外,最让人头疼的应...

    KavenFan 评论0 收藏0
  • 如何打造一个令人愉悦前端开发环境(一)

    摘要:我觉得这方面的原因是当时对和的依赖,导致大家对的兴趣不弄,错过了最佳时机,这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过,说新的构建工具就是的构建工具。 文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS、超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html、css、js三板斧之外,最让人头疼的应...

    Yangyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<