Gulp的使用

一.全局安装gulp-cli

 二.项目中安装gulp

1.npm init// 初始化项目

 

 

 

 

2.npm install gulp@4.0.2 --save-dev// 局部安装gulp—--save-dev表示将gulp作为devDependencice(开发依赖)保存到package.json文件中

 

3.gulp -v// 查看gulp版本,查看是否安装成功

 

三.构建项目

1.在项目 根目录 下建立 gulpfile.js(不可更改) 文件

 

2.在gulpfile.js文件中编写任务.(gulp.task()建立任务…) 

3.在命令行工具中执行gulp.first

四.在项目中使用Gulp 

1.less转换--npm install gulp-less,css压缩--npm install gulp-csso

 

   (1).引入插件

   (2).在css文件夹下面建.less后缀的文件

  (3).建立任务 

   (4).执行任务 gulp cssmin

  (5).生成文件

 

 2.压缩js代码并转换ES6语法--gulp-babel,gulp-uglify

  (1).下载插件

 

 

   (2).引入插件

  (3).建立任务

 

   (4).执行任务gulp jsmin

  (5).生成文件

  3.压缩html文件以及抽取公共部分代码--gulp-htmlmin,gulp-file-include

    (1).下载插件

 

    (2).引入插件 

 

    (3).建立任务

 

     (4).抽取公共部分代码 

          先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中

    

         在原文件中(article.html)使用@@include('./common/header.html')()里面存放路径

 

   (5).执行任务gulp htmlmin

 

  (6).生成文件

 

4.复制目录--gulp copy

   (1).将src目录下的images目录和lib目录,复制到dist目录,建立任务

  

   (2).执行任务gulp copy

  (3).生成文件

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个使用 `gulp-useref` 并过滤指定 js 文件的示例: ```javascript const gulp = require('gulp'); const useref = require('gulp-useref'); gulp.task('build', function() { return gulp.src('src/*.html') .pipe(useref({ searchPath: ['src', '.'] })) // 过滤掉不需要处理的 js 文件 .pipe(gulp.dest('dist')); }); ``` 在这个示例中,我们使用 `gulp-useref` 来处理 HTML 文件,并将注释块中引用的 JS、CSS 文件合并到一个或多个文件中。同时,我们通过 `searchPath` 属性指定了搜索路径,这样 `gulp-useref` 就能够正确地解析 HTML 文件中的相对路径了。 接着,我们通过 `pipe` 方法将处理后的文件输出到 `dist` 目录中。在这个过程中,我们也可以使用 `gulp-if` 来过滤掉不需要处理的文件。例如,如果我们只想处理所有 `src` 目录下的 JS 文件,可以这样写: ```javascript const gulp = require('gulp'); const useref = require('gulp-useref'); const gulpIf = require('gulp-if'); gulp.task('build', function() { return gulp.src('src/*.html') .pipe(useref({ searchPath: ['src', '.'] })) // 只处理 src 目录下的 js 文件 .pipe(gulpIf('**/*.js', gulp.dest('dist'))) .pipe(gulp.dest('dist')); }); ``` 在这个示例中,我们使用 `gulp-if` 来过滤掉不需要处理的 JS 文件,而只处理 `src` 目录下的 JS 文件。这样,我们就能够只处理我们需要的文件了。 希望这个回答能够帮到你,如果你还有其他问题,可以继续问我。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值