gulp

bootstrap

http://www.bootcss.com/

• Bootstrap相关优质项目推荐

gulp

https://www.gulpjs.com.cn/

npmjs

https://www.npmjs.com/

• 不使用脚手架的搭建项目的时候使用gulp自动化构建工具

开始使用

1. 全局安装 gulp命令：

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

2.1 先新建一个项目文件
2.2 进入项目 生成一个包管理文件
2.3 将gulp安装到开发依赖中

• 开发依赖 devDependencies , -D,项目上线后不需要
• 生产依赖 dependencies,-S,上线后需要使用

$ npm init -y

注意

• 加一个-y 就会一步执行到底 不用再确认每一步

$ npm install --save-dev gulp

或者

$ npm install -D gulp ======（简写）

建议
这一步建议在终端里面执行，不在webstrom里面执行 会生成nodemodules，不然会比较慢

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

• 注意文件名必须是gulpfile

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

插件

建议搜索插件的网址
https://www.npmjs.com/

常用插件

### gulp-less
### gulp-rename
### gulp-uglify

• 注意： 需要使用 ### gulp-babel插件先将ES6语法的js转为ES5

### gulp-babel
### gulp-concat
### gulp-sass
### gulp-clean-css
### run-sequence

• 版本3.9.1可以支持,目前4.0.0不支持

### del
### gulp-livereload

api

https://www.gulpjs.com.cn/docs/api/

1.gulp.src
2.gulp.dest
3.gulp.task(name, [ deps], fn)
4.gulp.watch(glob, [ opts], tasks) 或 gulp.watch(glob, [opts, cb])

注意

• 高版本不支持

gulp.task('watch', function () {
    // 监听文件 执行任务
    gulp.watch('./sass/**/*.scss', ['sass']);
    gulp.watch('./less/**/*.less', ['less']);
});

通配符

* 表示匹配任意字符 0~n 个，不匹配 /斜杠符号
? 表示匹配任意字符 1 个，不匹配 /斜杠符号
** 表示匹配任意字符 0~n个，且匹配 /斜杠符号

网页插件

热更新livereload
https://chrome.google.com/webstore/search/livereload?hl=zh-CN