问题 | 解决 | 关键复习 |
全局安装 | $ npm install --g gulp | |
下载到node_modules里 让本地可用 | npm install gulp --save-dev | |
定义一个任务 | 在项目根目录下创建一个名为 gulpfile.js 的文件 这文件里写上 var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); | |
如何让任务依次执行 | var gulp = require('gulp'); // 返回一个 callback,因此系统可以知道它什么时候完成 gulp.task('one', function(cb) { // 做一些事 -- 异步的或者其他的 cb(err); // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了 }); // 定义一个所依赖的 task 必须在这个 task 执行之前完成 gulp.task('two', ['one'], function() { // 'one' 完成后 }); gulp.task('default', ['one', 'two']); | |
gulp.watch | 监视文件变更 | |
删除文件 | var gulp = require('gulp'); var del = require('del'); gulp.task('clean:mobile', function () { return del([ 'dist/report.csv', // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西 多层级的 真的是全部删掉了!!!! 'dist/mobile/**/*', // 我们不希望删掉这个文件,所以我们取反这个匹配模式 '!dist/mobile/deploy.json' ]); }); gulp.task('default', ['clean:mobile']); | |
使用步骤 | nodejs 全局安装gulp 项目安装gulp和gulp插件 配置gulpfile.js 运行任务 | |
只给 package.json 做版本管理 | node的插件包不做版本管理 | |
npm安装插件的命令 | npm install <name> [-g] [--save-dev] -g表示全局 --save 将保存配置信息到 package.json -dev 保存到package.json的devDependencies节点,不指定的话将保存到 dependencies节点 | |
全局安装和本地安装的区别 | 我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能 | |
gulp的作用 | 自动完成js coffee sass less html image css等文件的测试 检查 合并 压缩 格式化 浏览器自动刷新 部署文件生成 监听文件在改动后重复指定的这些步骤 | |
压缩图片 | imagemin-pngquant | |
压缩js文件 | 用这两个: var uglify = require("gulp-uglify"); var ts = require("gulp-typescript"); | |
gulp和webpack对比 | 核心功能无法替代,gulp 任务定义和管理 Webpack 做不到,Webpack 基于模块的依赖构建 gulp 做不好 | |
对package.json的理解 | dependencies 项目运行所需要的模块 devDependencies 项目开发所需要的模块 --save 表示将该模块写入 dependencies --save-dev 表示将该模块写入 devDependencies config 用于向环境变量输出值 engines 指明该项目所需要的node.js版本 | |