美文网首页
gulp使用指南

gulp使用指南

作者: 老95 | 来源:发表于2017-06-07 19:23 被阅读0次

什么是gulp?
一个前端构建工具,通过脚本实现文件、图片的压缩等功能,
功能的实现依赖于插件,所以想使用什么功能,必须先安装对应的插件。
gulp的安装、使用
1、安装node环境
node环境安装包下载地址:https://nodejs.org/en/download/
根据操作系统选择不同平台的安装包,下载完毕后双击安装包即可安装。
安装完毕后再控制台(windows系统使用DOS窗口)输入以下命令测试是否安装成功:
查看node版本号:node -v
查看npm版本号:npm -v
输入以上命令,只要控制台能打印出版本号就说明已经安装成功,否则需要重新安装。
2、全局安装gulp
在DOS中执行:npm install -g gulp
3、在要使用gulp的项目中单独安装一次gulp(方便单独操作各个项目),同时安装所需要的插件
gulp-uglify插件是压缩.js文件的插件
命令: npm install gulp gulp-uglify
4、在项目根目录下创建gulpfile.js文件,在文件中定义需要完成的任务

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

/* task函数:开启gulf任务的函数,第一个参数是任务名称,在执行
 * 任务时是通过任务名称调起执行,如果不给任务名称的值或值是default,则表示该任务
 * 是默认任务:在调起相关任务时,没有指定任务名称,会执行默认任务(DOS命令:gulp)。
 * 若给任务名称,则在执行gulpfile.js文件时,DOS命令为 gulp + 任务名称
 */
/*gulp.task('default', function(){
    gulp.src('./index.js')
    .pipe(uglify())
    .pipe(gulp.dest('./index-min.js')); // 写入到指定的文件夹
});*/

gulp.task('hello', function(){ // hello为任务名称
    gulp.src('./*js')   // 压缩所有的.js文件
    .pipe(uglify())
    .pipe(gulp.dest('./index.min.js')); // 写入到指定的文件夹(例如:index.min.js是文件夹名称)
//  .pipe(gulp.dest('index.min.js/'));  // 将压缩的文件.js存放在index.min.js文件中
});

5、切换到gulpfile.js所在的文件夹下,运行gulp任务
DOS命令:gulp 任务名称
如果gulp命令后没有加任务名,则执行默认任务(default)
如果gulp后添加了任务名,则执行指定的任务

gulp的常用的方法

1、gulp.src(path):指定要操作的文件(以流的形式读取出来)。
参数是要读取的文件的路径,如果要匹配多个文件路径,可以使用数组结构
2、gulp.task(name , function):
name:任务名,如果没有指定任务名,默认是default
function:任务所对应的实现函数
注意:如果需要按某个顺序执行多个任务,可以在中间插入第二个参数:依赖任务

        // 只要执行default任务,就相当于把one、two、three这三个任务执行了
        gulp.task('default',['one','two','three']);

3、gulp.dest(path):把文件流写入到指定的位置
参数是要写入的路径(文件名是读取时的名字),如果需要修改写入的文件名,则需要使用插件修改:gulp-rename

gulp常用插件
1、重命名插件
安装方法:npm install gulp-rename

image.png
2、js文件压缩插件
安装方法:npm install gulp-uglify
image.png
3、CSS文件压缩
安装发法:npm install gulp-minify-css
image.png
4、js代码语法检查
安装方法:npm install gulp-jshint
image.png
5、文件合并
安装方法:npm install gulp-concat
image.png
6、less编译
安装方法:npm install gulp-less
image.png
实例:
gulpfile.js文件
var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

/* task函数:开启gulf任务的函数,第一个参数是任务名称,在执行
 * 任务时是通过任务名称调起执行,如果不给任务名称的值或值是default,则表示该任务
 * 是默认任务:在调起相关任务时,没有指定任务名称,会执行默认任务(DOS命令:gulp)。
 * 若给任务名称,则在执行gulpfile.js文件时,DOS命令为 gulp + 任务名称
 */
/*gulp.task('default', function(){
    gulp.src('./index.js')
    .pipe(uglify())
    .pipe(gulp.dest('./index-min.js')); // 写入到指定的文件夹
});*/

gulp.task('hello', function(){ // hello为任务名称
    gulp.src('./index.js')   // 压缩所有的.js文件
    .pipe(uglify())  // 使用插件进行压缩.js文件
    .pipe(rename('./index.min.js'))  // 调用rename插件
    .pipe(gulp.dest('./index.min.js')); // 写入到指定的文件夹(例如:index.min.js是文件夹名称)
//  .pipe(gulp.dest('index.min.js/'));  // 将压缩的文件.js存放在index.min.js文件中
});

相关文章

  • sass/git/gulp

    sass用法指南sass语法 常用git指令git-book gulp详细入门教程gulp使用指南segmentf...

  • gulp使用指南

    什么是gulp?一个前端构建工具,通过脚本实现文件、图片的压缩等功能,功能的实现依赖于插件,所以想使用什么功能,必...

  • gulp使用指南

    我写这篇博客的目的只是为了帮助那些还不会gulp的人能够完整的使用gulp这个工具来协助你完成web开发!我希望这...

  • Gulp使用指南

    1.Gulp是什么简单来说Gulp就是一个自动任务处理器,用来帮助前端简化开发流程的工具。比如一些和文件相关的操作...

  • gulp使用指南

    gulp 是一个使用“流”来实现自动化的工具,正如 官方文档[https://gulpjs.com/] 首页展示的...

  • gulp

    gulp gulp.src gulp.dest gulp.task gulp.watch gulp.pipe() ...

  • gulp自动化项目构建

    var gulp = require('gulp');//引用gulp var $ = require('gulp...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • Gulp 使用方法(教程一)

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

  • gulp讲解

    一、gulp的四个主要的API gulp.src、gulp.pipe、gulp.dest、gulp.watch 二...

网友评论

      本文标题:gulp使用指南

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