Gulp 学习笔记

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

猜你喜欢

转载自www.cnblogs.com/jason-beijing/p/10327464.html