gulp(自动化构建工具)(代码片段)

关键词：

前言

Gulp，简而言之，就是前端自动化开发工具，利用它，我们可以提高开发效率。

比如：

　　1、  压缩js

　　2、  压缩css

　　3、  压缩less

　　4、  压缩图片

　　等等…

我们完全可以利用Gulp来自动化地完成这些重复性很强的工作。

Gulp可以帮助我们 用自动化构建工具增强你的工作流程！

好了，废话不多说了。既然要了解Gulp，就得先安装它。Gulp是基于node来实现的，so你得先有个node环境

优势：

node环境有了后，安装Gulp就很easy咯

入门指南

1. 全局安装 gulp：

$ npm install --global gulp  （后面加-g代表全局）

安装完成后，输入gulp –v查看是否安装成功。

如下：

但，就算你这么安装了全局gulp，你每次到项目中时，还得在相应目录下安装gulp。

原因就是，gulp就这么设置的，避免发生版本冲突。

所以这步安装gulp可以可无，不过就当初步了解它嘛

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() 
  // 将你的默认的任务代码放在这
);

4. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

//导入工具包 require(‘node_modules里对应模块‘)
var gulp = require(‘gulp‘), //本地安装gulp所用到的地方
    less = require(‘gulp-less‘);
 
//定义一个testLess任务（自定义任务名称）
gulp.task(‘testLess‘, function () 
    gulp.src(‘src/less/index.less‘) //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css
);
 
gulp.task(‘default‘,[‘testLess‘, ‘elseTask‘]); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

完整版Gulpfile处理js/css文件：

"use strict";

var gulp = require("gulp"),//引入Gulp依赖
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json"),
    less = require("gulp-less"),
    path = require("path"),
    gulpSequence = require("gulp-sequence");

//正则匹配表达式
var regex = 
    css: /.css$/,
    html: /.(html|htm)$/,
    js: /.js$/,
    less: /.less$/
;

//任务
gulp.task("min", gulpSequence("less", ["min:js", "min:css", "min:html"]));

gulp.task(‘less‘, function () 
    return gulp.src(‘./Layout/Less/*.less‘)
        .pipe(less())
        .pipe(gulp.dest(‘./wwwroot/css‘));
);

gulp.task("min:js", function () 
    var tasks = getBundles(regex.js).map(function (bundle) 
        return gulp.src(bundle.inputFiles,  base: "." )
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    );
    return merge(tasks);
);

gulp.task("min:css", function () 
    var tasks = getBundles(regex.css).map(function (bundle) 
        return gulp.src(bundle.inputFiles,  base: "." )
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    );
    return merge(tasks);
);

gulp.task("min:html", function () 
    var tasks = getBundles(regex.html).map(function (bundle) 
        return gulp.src(bundle.inputFiles,  base: "." )
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin( collapseWhitespace: true, minifyCSS: true, minifyJS: true ))
            .pipe(gulp.dest("."));
    );
    return merge(tasks);
);

gulp.task("clean", function () 
    var files = bundleconfig.map(function (bundle) 
        return bundle.outputFileName;
    );

    return del(files);
);

gulp.task("watch", function () 
    gulp.watch(‘./Layout/Less/*.less‘, [‘less‘]);

    getBundles(regex.js).forEach(function (bundle) 
        gulp.watch(bundle.inputFiles, ["min:js"]);
    );

    getBundles(regex.css).forEach(function (bundle) 
        gulp.watch(bundle.inputFiles, ["min:css"]);
    );

    getBundles(regex.html).forEach(function (bundle) 
        gulp.watch(bundle.inputFiles, ["min:html"]);
    );
);

function getBundles(regexPattern) 
    return bundleconfig.filter(function (bundle) 
        return regexPattern.test(bundle.outputFileName);
    );

然后执行

然后再文件夹中可查看到，把所有的css、js自动压缩到了min里面。

此致，gulp构建 算是初步完成，后面还有很多可以优化的地方，具体可以参考： Gulp API文档

前端自动化构建之gulp(代码片段)

...每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一... 查看详情

gulp(代码片段)

...ystemgulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大... 查看详情

gulp自动化构建的基本使用(代码片段)

...友喜欢，可以关注、收藏、点赞下本博主的文章。Gulp用自动化构建工具增强你的工作流程！gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。基本使用安装gulpnpmigulp-D在项目根目录下创... 查看详情

es6基础——环境构建任务自动化服务器搭建(代码片段)

...块化的思想,如何去创建一个前端项目的架构组成。2.任务自动化(gulp)1.简单来说就是自动化编译,如sass/less自动编译为css。3.编译工具(babel/webpack)1.自动化需要编译工具去完成。4.代码实现 1.由于代码太多在下面会有专门的一篇文章... 查看详情

gulp自动化构建工具下的swigbabelsass

1、三个需要在npm中找相应的教程gulp-scss、gulp-swig、gulp-babel2、具体的相关代码如下vargulp=require(‘gulp‘);varswig=require(‘gulp-swig‘);varbabel=require(‘gulp-babel‘);varscss=require("gulp-scss");gulp.task("scss",function(){g 查看详情

gulp的使用流程(代码片段)

GULP的使用流程Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。一、建... 查看详情

gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件(代码片段)

...前端构建工具模块，将前端机械化的操作编写成任务自动化操作，类似于webpack构建，可以完成代码压缩、语法转换、抽离公共文件、自动实现浏览器刷新等。基本使用步骤：1.使用npminstallgulp下载gulp库文件。2.在... 查看详情

node.js使用教程-2.gulp打包构建入门与使用(代码片段)

前言gulp是一个前端项目开发的自动化打包构建工具,类似的打包工具还有webpack。前端开发的过程中，会写到js文件，css文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩... 查看详情

如何选择javascript构建工具之babelbrowserifywebpackgrunt以及gulp(代码片段)

...Webpack能够打包JavaScript文件以及其相关的依赖使用Gulp能够自动化地将文件批量重命名，从而刷新静态资源文件的缓存那么，问题来了，前端构建工具那么多，为什么我偏偏推荐上述的这些呢？追根溯源我对很多流行的JavaScript构... 查看详情

gulp简单介绍(代码片段)

Gulp介绍自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。特点任务化基于流(数据流io:input/output)操作整个操作都是基于数据流进行操作具备属于gulp的内存，所有... 查看详情

gulp

...？gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大... 查看详情

gulp是什么？

...　gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大... 查看详情

gulp

简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

gulp

简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

glup快速入门整理(代码片段)

...的前端项目构建工具,也是基于Nodejs的自动任务运行器能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务gulp更高效(异步多任务),更易于使用,插件高质量安装... 查看详情

gulp入门教程

...　　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且... 查看详情

gulp简单安装和入门(适用刚接触gulp的同学)(代码片段)

一、gulp　　1、gulp主要用来在前端开发过程中对代码进行自动化构建的工具，能大大提高前端开发效率。　　2、主要对js/sass/less/html/image/css等静态资源文件进行合并、压缩、格式化、浏览器自动刷新、部署文件生成、转换等操... 查看详情

前端构建的初步尝试(代码片段)

...经历的刀耕火种的工人时代(手动)后，迎来了工业时代（自动化工具）。随着node的出现,以此为基础的构建工具有代表性的有grunt,gulp,webpack.这些工具主要就是帮我们完成上述的工作.针对目前我们的项目的情况,不需要对这些工具... 查看详情