gulp学习笔记

写在前面

1. gulp 使用要用node环境
2. gulp 很好用

一.安装gulp

npm install gulp -g

二.创建项目

> npm init
> 安装项目中的gulp (install gulp --save-dev)
> 项目结构推荐如下(推荐用模块化开发,每一个大的功能放在一个文件夹中,不要讲项目中的所以css放在一个文件夹下,js放在一个文件夹下):
    - app
        |-index.html
        |-font
        |-images
        |-功能模块
    + dist
    - gulpfile.js
    + node_modules
    - package.json

三.gulp使用

var gulp = require('gulp');

//gulp的任务
gulp.task('task-name', function() { 
    //  任务代码
});

//gulp的监听
gulp.watch('文件路径', ['需要运行的task']);

//gulp的Node globs(类似正则表达式的匹配路径)
> *.scss 匹配当前目录下所有以.scss结尾的文件
> **/*.scss 切尔西当前目录及所有子目录下，所有以.scss结尾的文件
> !not-me.scss不包含名为not-me.scss文件
> *.+(scss|sass) 匹配当前目录下所有以.scss或者.sass结尾的文件

四.用gulp开启web server,修改自动刷新

使用到gulp官方网站上推荐的 browser-sync

使用步骤如下:
(1) 安装 gulp , browser-sync

npm install gulp --save-dev
npm install browser-sync --save-dev
或者
cnpm install gulp --save-dev
cnpm install browser-sync --save-dev

(2) 假设项目结构如下:

gulpfile.js
app/
  styles/
    main.css
  scripts/
    main.js
  index.html

(3) 编写gulpfile.js文件

var gulp = require('gulp');
var browserSync=require('browser-sync');
var reload=browserSync.reload;

gulp.task('serve',function () {
    browserSync({
        server:{
            baseDir:'app' //这里设置基本路径,下面watch中就可以从此路径开始写,baseDir这个目录下要有index.html(即入口文件)
        }
    });
    gulp.watch(['*.html','styles/*.css','scripts/*.js'],{cwd:'app'},reload);
});

(4) 运行 gulp serve