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-devnpm install browser-sync --save-dev或者cnpm install gulp --save-devcnpm install browser-sync --save-dev

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

gulpfile.jsapp/  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