• JS那些事儿——Gulp的入门使用


    前言

    新人使用gulp的一个记录。

    首先对于第一个新事物,我会问gulp这是什么?

    答:gulp是一个自动化构建工具,它可以做一些自动化的任务,比如:

    • 检查Javascript
    • 编译Sass(或Less之类的)文件
    • 合并Javascript
    • 压缩并重命名合并后的Javascript
    • 变更静态资源
    • 给静态资源添加 md5
    • 合并雪碧图
    • 自动刷新浏览器
    • ...

    以前为了提高网站的访问速度,这些都是人工做的,现在gulp可以很好的完成他们,因为它们是流程化的,程序员就是极客,这种能用程序做的当然不用人来咯。

    好了,想必到这大家也对gulp有了初步的了解,下面开始进入使用流程。

    gulp的使用

    gulp的使用很简单。

    三步走起!!!

    项目目录

    同样,我们先建立一个新项目用来入门。项目的目录结构如下:


     

    这里我先简单贴出里面的具体代码,我们最最重要的是 gulpfile.js

    首先是两个js文件,咱们这次只是为了测试,所以代码都很简单。

    header.jsindex.js

    //header.js
    
    function A() {
        console.log("I am A");
    }
    
    
    
    //index.js
    
    function B() {
        console.log("I am B");
    }

    下面再看看 index.less

    // index.less
    
    @color: #4D926F;
    
    #header {
      background-color: @color;
    }
    h2 {
      color: @color;
    }

    再下面是 index.html

    // index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="../../dist/css/index.css" />
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

    Gulp配置文件

    最最最重要的 gulpfile.js 闪亮登场,这段我们好好讲讲,非常重要。

    gulp只有五个方法: task , run , watch , src ,和 dest

    task 这个API用来创建任务,在命令行下可以输入 gulp test 来执行test的任务。
    run 这个API用来运行任务
    watch这个API用来监听任务。
    src 这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正则表达式/*/.scss。
    dest 这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。

    其实整个gulp的配置文件,基本上都是在做一些任务的配置,比如创建任务,监听任务等等。

    // gulpfile.js 
    
    // 引入 gulp
    var gulp = require('gulp');
    
    // 引入组件
    var jshint = require('gulp-jshint');
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    
    // 编译less
    gulp.task('less', function() {
        gulp.src('src/less/*.less') //该任务针对的文件
            .pipe(sass()) //该任务调用的模块
            .pipe(gulp.dest('./dist/css')); //将会在dist/css下生成index.css
    });
    
    // 检查脚本
    gulp.task('lint', function() {
        gulp.src('src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
    });
    
    // 合并,压缩文件
    gulp.task('scripts', function() {
        gulp.src('src/js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist'));
    });
    
    // 默认任务
    gulp.task('default', function(){
        gulp.run('lint', 'less', 'scripts');
    
        // 监听JS文件变化
        gulp.watch('src/js/*.js', function(){
            gulp.run('lint', 'less', 'scripts'); //多个任务就直接往后加即可
        });
         // 监听less文件变化
        gulp.watch('src/less/*.less', function(){
            gulp.run('lint', 'less', 'scripts');
        });
    });
    
    // gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
    // gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组) 
    // gulp.dest(path[, options]) 处理完后文件生成路径

    这时,我们创建了一个基于其他任务的default任务。使用 .run() 方法关联和运行我们上面定义的任务,使用 .watch() 方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务,就会自动重新编译打包了,就是重新运行上面的任务。

    上面的注释说的都很清楚,初步的,其他的就不介绍了。

    好了,到现在为止,我们的代码已经写完了。

    执行Gulp任务

    下面咱们开始执行自动化任务命令。
    gulp xxx , 这里的 xxx 就是咱们上面写的 task,咱们还可以写 gulp less , gulp lint...


     

    结果如下:


     

    而且文件都是编译好的。

    // index.css  less编译后的,很强大吧
    
    body {
      background-color: #4D926F;
    }
    h2 {
      color: #4D926F;
    }
    
    
    
    // all.js  合并了 index.js header.js的内容
    
    function B() {
        console.log("I am B");
    }
    function A() {
        console.log("I am A");
    }
    
    
    
    //all.min.js  被压缩后的
    
    function B(){console.log("I am B")}function A(){console.log("I am A")}

    另外说下 gulp.watch 这个是监听文件变化,我们修改一下 index.lessgulp就会自动重新执行三个Task,具体就不演示了。

    这时候你打开你的views下的index.html,能见到以下画面,说明你成功了。


     

    代码

    本文代码已经上传到 github上,喜欢的话,给个star呗。

    https://github.com/XuXiaoGH/gulptest/tree/master

    写在最后

    本文是一个gulp的入门级教程,如有错误还请大牛指正,让小子也有得进步。
    如果对你有所帮助,那是我最大的荣幸。

    对了,兄台,对你有帮助的话能否点个赞再走。



    文/夏风轻语(简书作者)
    原文链接:http://www.jianshu.com/p/c0b7db11079c
    著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
  • 相关阅读:
    MJExtension使用
    使用html5结构化元素
    我的第一个html页面
    编写delegate(明天补充)
    iOS 获取系统相册数据(不是调系统的相册)
    CocoaLumberjack+XcodeColor(输出带有颜色的日志)在安装过程中遇到的问题
    iOS基础-UIKit框架-高级视图-UIPickerView-实例1:点菜(列与列之间无关系)
    iOS基础-UIKit框架-基础视图-UIScrollView
    OC与iOS开发
    Effective Objective-C 2.0 编写高质量iOS与OS X代码的52个有效方法---1-2章
  • 原文地址:https://www.cnblogs.com/libin-1/p/6052835.html
走看看 - 开发者的网上家园