gulp基本使用方法

前提:已经使用node安装好全局gulp。

1.创建package.json并配置

打开dos窗口,进入在项目文件,输入npm init,生成package.json文件,

{

"name": "项目文件名",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC"

}

2.安装gulp

dos窗口输入npm(cnpm) install gulp  --save-dev

3.安装插件

常用插件:gulp-uglify (JS压缩),gulp-minify-css(CSS压缩),gulp-minify-html(html压缩),gulp-jshint(JS代码检查),gulp-concat(文件合并),gulp-less(编译Less),gulp-sass(编译Sass),gulp-imagemin(压缩图片),gulp-rename(文件重命名,主要配合压缩插件使用)等

安装方法:npm(cnpm) install 插件名 --save-dev 

安装完成后打开package.json文件可以看到配置变化

{

"name": "demo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"devDependencies": {

"browser-sync": "^2.18.13",

"gulp": "^3.9.1",

"gulp-minify-css": "^1.2.4",

"gulp-rename": "^1.2.2",

"gulp-sass": "^3.1.0"

}

}

4.创建gulpfile.js文件,这个很重要,目前写的所有的gulp的内容都在这个js里

(1)加载插件

var gulp=require("gulp")   必需;

var sass=require("gulp-sass");   用哪个加载哪个(以sass为例)

(2)使用插件

gulp的API介绍

(这里只写一些常用的概念,详细的请看http://www.gulpjs.com.cn/docs/api/)

gulp.task(name,[deps], fn)---定义一个任务,name为任务名;[ deps]为一个任务列表数组,里边包含其他的任务名称,这些任务会在当前任务之前执行;fn为你要进行的操作,一般格式为function(){

    gulp.src()

    .pipe(someplugin())

}

gulp.src(globs[, options]),表示输出所有匹配的文件,例:gulp.src("styles/*.css"),匹配文件夹下所有的css后缀的文件;

gulp.dest(path[, options]),表示对文件操作完成之后将要输入的位置,例:gulp.dest("minCss/"),将文件放入minCss文件夹内,如果没有,则自动创建一个该文件夹;

gulp.watch(glob[, opts, cb]),表示监听一些文件,并在文件有改动是进行一些操作,例:gulp.watch("styles/*.scss",["sass"]),监听styles文件夹中的所有scss文件,如果发生变动,就执行名为sass的任务;

使用(以sass为例)

gulp.task("sass",function(){

    gulp.src("styles/*.scss")       //输出styles文件夹里的所有scss文件

    .pipe(sass())                        //执行sass插件

    .pipe(gulp.dest("styles/css"));     //将文件输入到styles/css文件夹中

})

gulp.task("default",function(){

gulp.start("sass");      //运行sass任务

gulp.watch("styles/*.scss",["sass"]);   //监听文件变动

});

在dos窗口中输入gulp,会自动运行default任务。


基本使用方法就是这样,刚刚接触gulp,做做笔记,加深印象。别说,效果还挺好。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 3,480评论 1 29
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 480评论 0 1
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 507评论 0 3
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 2,267评论 6 54
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 1,188评论 1 11