前端东西系列之一 Gulp

2024年1月7日 218次阅读 来源: Yorolling

从(约莫)2014年最先,前端不再是当初谁人切图排版的前端了，种种MV*框架、库、东西呈井喷之势屡见不鲜。构建东西比较著名的如Grunt、Gulp、Yeoman、webpack；依托治理比方bower、npm，固然最盛行最广为人知的照样作为Nodejs的治理器npm；模块化涌现了CMD、AMD、UMD等，比方requirejs、seajs等的。

固然，很多手艺、手艺头脑等涌现的时期以至能够追溯至上个世纪。但进入群众视线，并逐渐投产的时期却为时尚早。

作为一个怕麻烦的懒人，关于前端的冗杂事情固然是要找一个自动化东西来处置惩罚，因而我遇到了Gulp。作为自动化东西，Gulp经常被拿来和Grunt比较，孰优孰劣不能混为一谈，毕竟每一个人关注的处所也不一样。关于Gulp与Grunt的对照，收集上有很多总结好的特性，有兴致的能够去搜刮检察浏览，我在这里就不凑字数了。

要运用Gulp，起首要做的第一步固然是要装置她啦！Gulp是基于NodeJs的一个自动化构建东西，既然是基于NodeJs了，那末装置Gulp之前天然要保证你已装置了NodeJS，这里我会从装置NodeJS最先。

我这里运用Ubuntu 16.04 LTS版本作为主机环境，其他版本的请自行注重差别。Windows相对Ubuntu来讲就更简朴了，置信难不到人人。

起首我们来装置NodeJS。Ubuntu下装置Linux有两种计划，一是采纳APT装置，但此方法并没有自动装置NPM，须要手动装置；第二种计划则是下载Nodejs源码，自行编译装置。这里采纳懒费事的方法——APT。

sudo apt-get install nodejs-legacy npm

回车以后，输入暗码，APT就会自动帮你把Nodejs、npm装置好了。当装置历程完毕后回到敕令指引时刻，能够输入nodejs -v 和 npm -v 来搜检装置效果。

注重：Ubutun中，NodeJS的包名有两个nodejs和nodejs-legacy,而不是node。

假如统统顺利，装置Gulp的前置步骤已完成了。接下来我们装置Gulp，Gulp是作为NodeJS的一个模块存在的，因而装置的时刻要用到NPM。

sudo npm install -g gulp

这一步完毕以后，Gulp装置就完毕了。接下来就到了关键时刻啦，设置Gulp的task，Gulp虽然是自动化构建东西，但照样须要我们来给她指定task，让她装置我们指定的task来事情，她还没智慧到猜想我们要做什么、怎么做。

Gulp的API较之Grunt少的多，仅仅只要4个。

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])

依托这4个API和浩瀚的Gulp 插件，我们就可以完成很多我们须要的功用。在编写Gulp使命之前，我们起首要在当前目次装置Gulp。


sudo npm install --save-dev gulp

统统准备事情已停当，下面我们就进入主题，我们就来写一个简朴的Gulp使命文件。
在当前目次建立一个空的文件，名字叫做gulpfile.js。

var gulp = require('gulp');

gulp.task('default', function(){
    console.log("task default done");    
});

将以上代码保存在gulpfile.js里。然后在敕令行终端里进入当前目次,在敕令行终端里输入gulp。gulp会自动查找当前目次中的gulpfile.js,然后剖析gulpfile中的使命列表，敕令行中假如没参数，则默许实行 default 使命，假如指定，则实行指定的使命。

平常情况下，将会在终端中看到

task default done

这行输出，而且另有每一个使命最先时候和完毕时候。

以上就是一个简朴的Gulp 使命，下面我会把我经常使用的设置发出来。我平常运用到的有几个功用。

  1. SASS编译紧缩

  2. JS紧缩

  3. browerSync(修正文件自动革新HTML和CSS、JS等)

gulpfile内容以下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssMinify = require("gulp-cssnano"),
    browserSync = require('browser-sync').create(),
    compass = require('gulp-compass'),
    paths = {
        scripts: ['js/*.js'],  // JS文件途径
        css: 'sass/*.scss', // scss 文件途径
    };

gulp.task('scripts', function() {
    return gulp.src(paths.scripts) // 读取JS文件
        .pipe(uglify()) // 紧缩
        .pipe(gulp.dest('script/'))  //将紧缩后的文件保存到 script目次
        .pipe(browserSync.stream()); // 关照browserSync 重载 JS文件
});

gulp.task("css", function() {
    return gulp.src(paths.css)  // 读取SCSS文件
        .pipe(compass({
            sass: 'sass',
            image: 'images'
        })) // 举行编译处置惩罚
        .pipe(cssMinify()) // 紧缩CSS文件
        .pipe(gulp.dest('css/')) // 宣布到css 目次
        .pipe(browserSync.stream()); // 关照browserSync革新CSS文件
});

// 注册serve 使命，serve使命依托scrips 和 css 两个使命
gulp.task('serve', ['scripts', "css"], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.css, ["css"]);
    gulp.watch("*.html").on("change", browserSync.reload);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['serve']);  // 将serve 使命注册为默许使命。

在这个使命清单中，须要依托以下插件。

gulp-uglify
gulp-cssnano
browser-sync
gulp-compass

在运用中，直接进入到当前目次中，在终端中运转gulp,将会启动一个http效劳，而且翻开浏览器窗口。

效劳启动后，不管你修正CSS、JS照样HTML，都邑自动编译紧缩而且自动革新HTML(假如须要，修正CSS、JS是不须要革新全部页面，只会从新加载CSS、JS)。

好了，杂乱无章的这个Gulp教程到这里算是因陋就简的扫尾了。实在Gulp 照样蛮壮大的，照样有很多内容没提到的，Gulp的API、插件的API这些都没有去解说，去看一下文档人人应当就邃晓了。

固然，这个设置照样有不足的，Gulp官方引荐的一些最好实践都没应用到，以至一些功用也没有完成，比方图片紧缩、公用模板援用。

图片紧缩能够去检察一下gulp-imagemin,大众模板援用gulp-content-includer。

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