个人理解Gulp是一个构建工具，它的来源是从后端演变而来:
buid code ->构建代码 ->构建工具->计算机能识别的语言
从而前端也开始有这个概念：
buid code ->js *css *jpg（静态资源文件)->合并 ->压缩
当然自动化构建工具不止gulp：
列举：
1，grunt
2，gulp
3，webpack
等等...，话说回来还有些公司依旧用gulp进行开发。
操作：
1,自动化构建都是基于node环境开发，所以要配置链接：
https://github.com/dk-lan/nodejs/tree/master/module/base
2,打开黑屏控制台：window键 + R
3,当你的环境配置好了以后，创建一个gulpfile.js
4,输入
var gulp = require('gulp')
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log('666')
})*/
备注：这是在控制台输出gulp默认运行default，一个页面只能有一个
5，gulp Api
1），gulp src(url) 路径匹配
gulp.src('./src/*.js') 匹配 src目录下所有 js 文件
gulp.src('src/**/*.js') 匹配 src 目录下所有目录的所有 js
2），gulp.task(name,fn)
gulp.task(‘you’，funtion(){
Console.log(6666)
});
gulp hello 执行任务 hello
gulp.task('default', fn) 定义一个默认任务 gulp 执行默认任务
3) gulp.task('default',['one','two','three']);(数组)
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成
gulp.task('one', function (cb) {
console.log(666)
})
gulp.task('two', function () {
// 'one' 完成后
console.log(7777)
})
// 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成
gulp.task('default', ['one', 'two'])
*/
4),gulp.watch(path, fn) 监听路径下文件变化
gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }); //event.type 发生的变动的类型：added, changed 或者 deleted //event.path 触发了该事件的文件的路径
5),gulp.run()表示要执行的任务。
可能会使用单个参数的形式传递多个任务
gulp.task('end',function(){ gulp.run('task1','task3','task2'); });
注意：任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行。
6)，gulp.dest()方法是用来写文件的，
其语法为gulp.dest(path[,options])
var gulp = require('gulp');
gulp.src('./scr/*.js') // 获取路径
.pipe(gulp.dest('dist/foo.js')); // 写入并放入文件
7),开启本地服务 gulp-connect
安装 gulp-connect npm install gulp-connect --save-dev
定义任务
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('myServer', function() { connect.server({
root: 'app',//服务启动的根目录
port: 8000,//端口
livereload: true//为true时gulp会自动检测文件的变化然后自动进行源码构建
}); });
8)，压缩 js gulp-uglify
安装 gulp-uglify npm install gulp-uglify --save-dev
定义任务
var gulp = require('gulp');
var uglisy = require('gulp-uglify');
gulp.task('jscompress', function () {
// 1. 找到文件
// return gulp.src('./Gulp/**/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('mins'))
})
监听
设置默认任务（即命令行中输入gulp执行的任务）
gulp.task('default', ['name'，'name']);
9)，压缩CSS gulp-clean-css
安装模块 npm install gulp-clean-css --save-dev
操作与->js压缩一样
10)，重命名文件 gulp-rename
安装模块 npm install gulp-rename --save-dev
11)，编译 sass
安装模块 npm install gulp-sass --save-dev
var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass111', function(){ return gulp.src('app/scss/index.scss') .pipe(sass()) .pipe(gulp.dest('app/css')) });
来源：千锋HTML5
网友评论