gulp从无到有

最新推荐文章于 2022-07-06 22:07:37 发布

原创最新推荐文章于 2022-07-06 22:07:37 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

工具专栏收录该内容

2 篇文章

订阅专栏

本文介绍gulp的基本用法，包括核心API如src、dest、task、watch等的使用方法，并通过实例展示如何设置gulp任务来自动编译Sass、监控文件变动并触发任务执行。

gulp API DOC
1.gulp.src(globs[,”options”]);
需要处理的源文件的路径，借鉴unix操作系统管道（pipe）思想，前一级的输出直接变成后一级的输入
globs:需要处理的源文件匹配符路径

2.gulp.dest(path[,”options”]);
指定处理完后文件指向的路径

3.gulp.task(name[,”deps”],fn);
task定义一个gulp任务
deps（可选），该任务依赖的任务

4.gulp.watch(glob[,opts],tasks) or gulp.watch(glob [, opts, cb])
4.1、说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务；
4.2、glob：需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
4.3、opts：类型(可选)：Object 具体看https://github.com/shama/gaze；
4.4、tasks：类型(必填)：StringArray 需要执行的任务的名称数组；
4.5、cb(event)：类型(可选)：Function 每个文件变化执行的回调函数；

安装gulp-sass插件（拿该插件进行示例）
进入你的项目文件路径中后，执行cnpm install gulp-sass –save-dev
新建gulpfile.js（重要，重要，重要）
gulpfile.js是gulp的配置文件，放于根目录中。
gulp安装教程，使用教程，简单的自动化任务教程
运行gulp
执行 gulp 任务名称运行该任务示例：gulp sass 执行gulpfile.js中的sass任务
gulp安装教程，使用教程，简单的自动化任务教程
执行 gulp 调用default中的所有任务
gulp安装教程，使用教程，简单的自动化任务教程
当 src/css/test.scss 发生修改时，会自动执行sass任务。
gulp安装教程，使用教程，简单的自动化任务教程
常用插件
sass的编译（gulp-sass）
less编译（gulp-less）
重命名（gulp-rename）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-clean-css）
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
图片缓存，只有图片替换了才压缩（gulp-cache）
更改提醒（gulp-notify）

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    sass = require('gulp-sass');

//定义一个sass任务（自定义任务名称）
gulp.task('sass', function () {
    return gulp.src('src/css/test.scss') //该任务针对的文件
        .pipe(sass()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

gulp.task('default',['sass', 'watch1']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

gulp.task('watch1', function(){
    return gulp.watch('src/css/test.scss',['sass']);
}) //定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径