美文网首页
gulp 入门

gulp 入门

作者: c_k | 来源:发表于2016-11-03 16:26 被阅读0次

    Gulp 入门

    安装

    npm install gulp --global    // --global 代表全局
    ```
    - 3. 开发依赖安装:进入项目的根目录执行命令 (在项目的根目录里创建一个package.json)
    ````js
    npm install gulp --save-dev   
    // --save将保存配置信息至package.json    -dav  保存至package.json的devDependencies节点
    
      1. 在 package.json 同级目录下创建一个名为 gulpfile.js 的文件:
    var gulp = require('gulp');
    gulp.task('default',function(){    //gulp 默认会执行的任务
      // do something
    });
    
      1. 运行 gulp:
    gulp
    

    Gulp API

    gulp 的 API 非常简单

    gulp.src('匹配模式或者匹配模式数组',['参数'])  //匹配模式 类似正则表达式
    .pipe(functionName())  // 获取操作后的文件流,传递给括号里面的函数
    gulp.dest('path',['options']);  // 将上一步操作后的文件输出到 path 路径里 
    gulp.task('任务的名称',function(){
       // dosomething 
       // for example :   
       gulp.start(['任务名称1,任务名称2']);
    });
    gulp.watch('监听对象',['任务1']);  
    // 监听对象:1、匹配模式;  2、任务名称
    // 任务1:在监听对象发生变化后需要执行的任务
    

    编译SASS Demo ,前提是已经安装了 gulp-sass 插件(基于 Ruby编译)

    var gulp = require('gulp'),
        gsass = require('gulp-sass');
    
    gulp.task('default', function() {
         gulp.start(['scss']);
    });
    
    gulp.task("scss",function(){
        gulp.src('scss/*.scss')
            .pipe(gsass())  //执行编译
            .pipe(gulp.dest('css')) ;
    });
    

    这里只是简单介绍了一下他的API,更详细的API请点解这里中文这里英文

    Gulp 常用插件列表

    Gulp 有着非常丰富的插件库,在他的官网里可以直接查询或者是到github 查找,如果都没有,没关系还可以自己开发一个。这里就不重复了,别人有现成的。

    相关文章

      网友评论

          本文标题:gulp 入门

          本文链接:https://www.haomeiwen.com/subject/wvtiuttx.html