从零开始用gulp

gulp是基于流的前端构件化工具。目前比较火的前端构建化工具仍是挺多的，grunt gulp fis3等等。

这个鬼东西有什么用？请参考https://www.zhihu.com/question/35595198

为何选择gulp,由于使用很是简单，学习成本低。之后想用别的工具再转去学也不难。

一个自动化构建工具都没用过的前端，何以谈人生？

 

如下是正题：

1.要玩gulp,首先得安装node,由于npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网，根据自身的环境（windows linux mac）下载安装包（msi）。直接进行傻瓜式安装。

2.安装完node后开始全局安装gulp, 在命令行输入命令 npm install -g gulp ,安装成功后就能够在命令行输入gulp相关的命令了，例如gulp -v查看当前版本号。（npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试）

3.在项目中安装 npm install --save-dev gulp，安装成功后就能够开始写配置文件了。

4.在项目根目录中建立文件  gulpfile.js

如下是简单的gulpfile.js  demo代码

代码这种东西一开始不会写，就先抄，抄着抄着就懂怎么写了。

//引入插件 var gulp = require('gulp'); var less = require('gulp-less');//须要npm install --save-dev gulp-less var paths = ['./css/*.less'];　　//定义一个数组，指定文件路径 
//下面开始编写一个任务 //less编译任务 gulp.task('less', function() { //建立一个gulp任务，任务名字是'less'，而后一个回调函数 return gulp.src(paths)　　　　//gulp任务操做的源文件'paths' .pipe(less()) //执行less编译 .pipe(gulp.dest('./css')); //gulp任务输出的新文件 }); //watch监放任务 gulp.task('watch', function(){ //建立第二个gulp任务，任务名字是‘watch',而后一个回调函数 gulp.watch(paths,['less']); //gulp的watch监听，文件改动后当即从新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/ }); //gulp.watch('default',['less']); gulp.task('default', ['less','watch']);　　//gulp的default任务，至关于glup的执行入口。而后把less任务和watch放进来，该脚本就会执行这两个任务

 

把以上代码写入gulpfile.js 后保存，而后项目根路径下执行命令 

gulp

就开始执行gulp完成你安排的任务。

平常开发中须要gulp作的有不少如合并文件（gulp-concat）压缩（gulp-uglify）重命名（gulp-rename）等等。

这就须要本身编写task来让gulp来执行。

最后总结一下，写好一个gulpfile.js很简单，结合demo代码和下面五个命令

gulp.task(name, fn)//新建一个gulp任务，name是任务名，fn回调函数

gulp.run(tasks...)//尽量多的并行运行多个task 新版本中的gulp中使用run会发出警告，这样的状况下咱们能够用start代替

gulp.watch(glob, fn//)当glob内容发生改变时，执行fn

gulp.src(glob)//返回一个可读的stream

gulp.dest(glob)//返回一个可写的stream

 须要更多的说明或者操做能够去下面的网站逛一逛

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

最后简单写就几个经常使用的gulp task，方便往后调用

1、压缩css

var minifycss = require('gulp-minify-css');//引用插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dst/css')); //输出文件夹
});

2、压缩js

 

var concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename');　　//引用插件，需npm install --save-dev xxxxxx gulp.task('minifyjs', function() { return gulp.src('src/*.js')　　//操做的源文件 .pipe(concat('main.js')) //合并全部js到main.js  .pipe(gulp.dest('minified/js')) //输出main.js到文件夹  .pipe(rename({suffix: '.min'})) //rename压缩后的文件名  .pipe(uglify()) //压缩  .pipe(gulp.dest('minified/js')); //输出  });

 

 3、清空输出目录

var=require'del'function() { return del(['dst']);　　//'dst'是一个目录 });

4、压缩图片

 

const imagemin = require('gulp-imagemin');
 
gulp.task('default', function(){ return gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')); });

 

5、压缩html

 

var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlMin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除全部空格做属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS  }; gulp.src('src/*.html') .pipe(htmlmin(options)) .pipe(gulp.dest('dst')); });

 

6、合并文件

 

var concat = require('gulp-concat'); gulp.task('concat', function () { gulp.src('src/js/*.js') .pipe(concat('all.js'))//合并后的文件名 .pipe(gulp.dest('dist/js')); });

 

7、css自动处理浏览器前缀,如添加-webkit-解决浏览器兼容问题

 

var autoprefixer = require('gulp-autoprefixer'); gulp.task('autoprefixer', function () { gulp.src('css/index.css') .pipe(autoprefixer()) .pipe(gulp.dest('dist/css')); });

 

 

转自：http://www.cnblogs.com/BillyQin/archive/2016/12/04/6130440.html