您的位置: 首页  >  IT文章  >  gulpfile.js文档

gulpfile.js文档

分类: IT文章 • 2022-06-16 13:58:31

gulp watch 实现监听不仅需要package.json文档，还需要gulpfile.js文档。否则无法实现。

1.gulp的安装

1.1 首先必须先安装node.js。这个可以参考之前的博客《node.js的安装配置》。

1.2 按照全局方式，在node.js的目录文件夹下安装全局的gulp 

npm install -g gulp

gulpfile.js文档

1.3 全局gulp安装好后，在需要gulp的项目里还要单独再安装一次。把目录切换到项目的目录下面，执行命令。

npm install gulp

gulpfile.js文档

如果想把gulp写进package.json中，执行命令

npm install gulp --save-dev
npm install gulp --save

这个在博客《package.json文档》中有详细描写。

2.gulp的使用

2.1 建立gulpfile.js文档

gulp需要一个文件作为它的配置文件，就是gulpfile.js。此时我们的目录结构如下：

gulpfile.js文档

3.gulp的API

因为，gulp的API文档网上都有，所以不详细介绍，这里只是介绍一下常用的一些。

3.1 gulp.task()

gulp.task()方法用来定义任务，其语法是：

gulp.task('name', ['deps1','deps2','deps3'],fn);

其中

  • name 是任务名。
  • deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。
  • fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

注意：如果任务相互之间没有依赖，任务会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。

3.2 gulp.src()

gulp.src()指定需要处理的源文件的路径，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件。其语法是：

gulp.src(["globs"]);

其中，glops是需要处理的源文件匹配符的路径。类型：字符串string或是字符串数组stringArray。（必填）

通配符路径匹配示例：

  • src/a.js：指定具体文件；
  • *：匹配所有文件,例：src/*.js(包含src下的所有js文件)；
  • **：匹配0个或多个子文件夹，例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
  • {}：匹配多个属性，例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
  • !：排除文件，例：!src/a.js(不包含src下的a.js文件)；

3.3 gulp.dest()

gulp.dest()是指定处理完后文件输出的路径，其语法是：

gulp.dest("输出路径")

3.4 gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

tasks 类型(必填)是StringArray需要执行的任务的名称数组；

4.gulpfile.js模板

//引入gulp
var gulp = require('gulp');

//引入需要的组件
var watch = require("gulp-watch");    //gulp监听
var browserSync = require('browser-sync');   //浏览器自动刷新
var reload = browserSync.reload;   //重新加载
var del = require("del");   //删除
var sass = require("gulp-ruby-sass");   //编译sass
var uglify = require("gulp-uglify");   //通过UglifyJS来压缩JS文件
var rename = require("gulp-rename");   //重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css。一般配合js、css压缩使用

//在编译之前删除一些文件
gulp.task("clean",function(cb){
    return del(["build/**/*"],cb);
});

//编译sass,sass任务会编译目录下的scss文件，并把编译完成的css文件保存到css/目录中
gulp.task("sass",function(){
    return sass("*.scss")
        .on("error",function(err){
            console.error("Error!"+err.message);
        })
        .pipe(gulp.dest("css/"));
});

//压缩js文件
gulp.task('minjs', function() {
    gulp.src(['a20161123/tianyi/js/*.js'])
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('a20161123/tianyi/js'))
    console.info('_____js concat and min: done');
});

//gulp watch监听，实现浏览器自动刷新
gulp.task("watch",function(){
    browserSync({
        server:{
            baseDir:"./"
        }
    });
    gulp.watch('*.scss', ['sass']);
    gulp.watch(["*.html","*.css","*.js"],function(){    
        reload();
    });
});

当以上都完成时就可以执行命令了。

  • 在需要运行的项目目录下面输入命令 gulp watch

gulpfile.js文档

  • 这时浏览器会自动打开项目中的index.html文档

gulpfile.js文档

  • 如果更新了.html 或是 .css 或是 .js 文档，保存后浏览器将会自动刷新网页。这个需要根据gulpfile.js的内容来实现

有道云笔记参考http://note.youdao.com/noteshare?id=45c15fe59e2d2b62a3ff1a6004953f13&sub=A912F00A372F4CB38F19422B39951797

相关推荐