美文网首页
gulp 的使用

gulp 的使用

作者: tanyp | 来源:发表于2017-03-09 20:08 被阅读0次

    http://www.gulpjs.com.cn/


    一. gulp 安装


    创建package.json文件

    npm init
    

    全局安装 gulp:

    npm install --global gulp
    

    作为项目的开发依赖(devDependencies)安装:

    npm install --save-dev gulp
    

    二. 基本 API


    • gulp.src(glob[, options])

      • 根据glob匹配文件,返回 stream,可以通过.pipe() 方法传递给后续的插件。
    • gulp.dest(path[, options])

      • 一般用法 .pipe(gulp.dest(path)),把pipe 中的内容按照指定的 path写成文件,会自动创建不存在的文件夹。
      • 注意,可以通过 .pipe多次指定输出的地方,具体请看 这里
    • gulp.task(name[, deps], fn)

      • 定义名为 name 的任务,定义之后就可以在命令行中使用 gulp xxx 来执行任务。
      • deps里面的任务全部完成后才会执行 fn
      • deps 里面的任务都是并行执行的,如果需要顺序执行,需要特殊写法。具体看 这里
    • gulp.watch(glob[, opts, cb])

      • 监听文件变化
      • 不会监听新文件(目录),所以一般你会需要 gulp-watch
      • watch方法路径不要用 './xx',用 './xx' 开头作为当前路径开始,会导致无法监测到新增文件,所以直接省略掉'./'即可。

    三. 安装插件


    1. Browsersync

    省时的浏览器同步测试工具,Browsersync可以同时在PC、平板、手机等设备下进项调试。

    Install

    $ npm install --save-dev browser-sync
    

    Usage (gulpfile.js 文件)

    var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    
    // 本地服务器
    gulp.task('browserSync', function() {
        browserSync.init({
            server: {
                baseDir: "./"
            },
            port:'8080'
        });
    });
    

    2. gulp-autoprefixer

    Install

    $ npm install --save-dev gulp-autoprefixer
    

    Usage

    var gulp = require('gulp'),
      autoprefixer = require('gulp-autoprefixer');
     
    gulp.task('autoprefixer', function () {
      gulp.src('src/css/index.css')
        .pipe(autoprefixer({
          browsers: ['last 2 versions', 'Android >= 4.0'],
          cascade: true, //是否美化属性值 默认:true 像这样:
          //-webkit-transform: rotate(45deg);
          //        transform: rotate(45deg);
          remove:true //是否去掉不必要的前缀 默认:true 
        }))
        .pipe(gulp.dest('dist/css'));
    });
    

    gulp-autoprefixer的browsers参数详解 (传送门):

    • last 2 versions: 主流浏览器的最新两个版本
    • last 1 Chrome versions: 谷歌浏览器的最新版本
    • last 2 Explorer versions: IE的最新两个版本
    • last 3 Safari versions: 苹果浏览器最新三个版本
    • Firefox >= 20: 火狐浏览器的版本大于或等于20
    • iOS 7: IOS7版本
    • Firefox ESR: 最新ESR版本的火狐
    • > 5%: 全球统计有超过5%的使用率

    3. gulp-less

    Usage

    var gulp = require('gulp');
    var less = require('gulp-less'); 
    gulp.task('less', function () {
      gulp.src('src/less/*.less')
          .pipe(less())
          .pipe(gulp.dest('src/css'));
    });
    

    参考

    四.运行


    1. 使用命令

    以上面的例子为例:

    $ gulp browserSync
    

    默认情况下直接运行gulp

    var gulp = require('gulp');
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });
    

    运行 gulp:

    $ gulp
    

    2. 使用webstrom自带的工具

    使用界面上的快捷方式


    相关文章

      网友评论

          本文标题:gulp 的使用

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