|
问题
|
解决
|
关键复习
|
|
全局安装
|
$ 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版本
|
|