自动化构建工具gulp的学习心得

个人理解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