美文网首页
gulp使用

gulp使用

作者: Look_a_Look | 来源:发表于2016-08-21 10:26 被阅读9次

1、项目中新建gulpfle.js文件,使用npm init生成package.json文件

2、作为项目的开发依赖(devDependencies)安装gulp:   $ npm install --save-dev gulp

3、安装gulp常用依赖        npm install --save-dev gulp-jshint

                                       npm install --save-dev gulp-uglify

                                       npm install --save-dev gulp-concat

      以上三个分别   JS检验,JS压缩,JS合并  的功能

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

       gulp.task(name[, deps], function(){ /*任务内容*/})    //定义任务

                        deps :一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

       gulp.src(globs[, options])    //把globs匹配的文件以buffer或stream,传给下一步进行操作

           options: {buffer:false,read:false,base:'js'}

       gulp.watch(glob[, opts, function(event){/*检测到文件变化执行的操作*/}]);

                         也可以是gulp.watch(glob[, opts], tasks)

       gulp.run('taskNames')  //运行指定任务,可以是多个(数组)

       gulp.dest(path[, options])  //将上一步操作传来的buffer或stream转为文件,存放到指定路径

            options: {cwd:'',mode:''}

5、示例

  var gulp = require('gulp');

  var jshint = require('gulp-jshint');

  var uglify = require('gulp-uglify');

  var concat = require('gulp-concat');

  gulp.task('concat', function () {

     gulp.src('./js/*.js')

     .pipe(jshint())

     .pipe(uglify())

     .pipe(gulp.dest('./build/'));

     console.log('uglify');

  });

  gulp.task('default', ['concat']);


注:

gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组,然后返回一个可以传递给插件的数据流。
Gulp使用node-glob来从你指定的glob里面获取文件

js/app.js 精确匹配文件

js/*.js 仅匹配js目录下的所有后缀为.js的文件

js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件

!js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用

*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

相关文章

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • html代码复用各种方法

    1.gulp-file-include(工具) 使用步骤:1.安装gulp以及gulp-file-include(...

  • 前端构建工具gulp构建项目

    使用前提条件 gulp是基于Nodejs的自动任务运行器,gulp依赖于nodejs,因此,在使用gulp之前需要...

  • gulp自动化构建html静态资源路径版本号添加和替换

    在使用gulp自动添加版本号时稍作一点修改,欢迎指正。 我使用的是(gulp-rev+gulp-rev-colle...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

  • Gulp4(一)——基本使用及核心原理

    目录 GlupGulp的使用步骤Gulp的基本使用安装起步默认任务gulp4.0之前的任务注册Gulp的组合任务G...

  • gulp入门教程详解

    最近使用gulp自动化构建工具来开发网站,在此给大家分享一下使用gulp的一些使用教程。 一 gulp安装 1、安...

  • gulp 使用教程

    【gulp 使用教程】 【gulp 使用教程】一、温馨提示1.1 使用此教程前需自身已经熟悉 node 以及 np...

网友评论

      本文标题:gulp使用

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