gulp入门

gulp入门

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；他不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成css、html、image、javascript等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新，并监听文件在改动后重复指定的这些步骤。gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

教程参考网站：http://www.ydcss.com/archives/18

1. 首先安装node

2. 安装淘宝镜像，可使用cnmp速度更快

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 全局安装gulp

cnpm install gulp-g

查看是否正确安装：命令提示符执行npm gulp -v，出现版本号即为正确安装

4. 在项目中初始化

在项目文件夹--右击--git bash here---打开命令行窗口

cnpm  init

输入相应项目信息，在自动生成的package.json中查看

Ctrl+C  结束当前命令

5. 在项目中安装

cnpm install gulp --save-dev

--save-dev可将信息添加到package.json中,查看是否加入

6. html压缩

安装压缩html的插件

cnpm install gulp-minify-html --save-dev

新建项目根目录下gulpfile.js,写入

vargulp=require('gulp');//本地安装gulp所用到的地方

varminifyHtml=require("gulp-minify-html");//加入相应依赖

//html压缩

gulp.task('htmltask',function() {//htmltask为自定义的任务名称

gulp.src('*.html')// 要压缩的html文件

.pipe(minifyHtml())//压缩，和上面定义的依赖名相同

.pipe(gulp.dest('./dist'))//压缩到哪

});

在命令中输入，执行上面的任务

gulphtmltask

总结：步骤1安装插件  2添加依赖  3 添加

生成里dist  里面只有一行文字

7. css压缩

安装压缩css的插件cnpm installgulp-clean-css--save-dev

gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致

gulpfile.js在最上面增加依赖

var minifycss= require('gulp-clean-css');

下面添加

gulp.task('csstask',function(){

gulp.src('./css/*.css')

.pipe(minifycss())

.pipe(gulp.dest('./dist/css'));//dist下新建css文件夹

});

在命令中输入，执行上面的任务

gulpcsstask

8. js压缩 合并

安装压缩js的插件npm installgulp-uglify--save-dev

安装合并js的插件npm installgulp-concat--save-dev

gulpfile.js在最上面增加依赖

var minifyjs= require("gulp-uglify");

varconcat=require('gulp-concat');

下面添加：

gulp.task('jstask',function(){

gulp.src('./js/*.js')

.pipe(minifyjs())// 压缩

.pipe(concat('all.js'))//合并后叫all.js

.pipe(gulp.dest('./dist/js'))//输出到dist下js文件夹

});

在命令中输入，执行上面的任务

gulpjstask

9. 生成雪碧图

安装插件：

cnpm install gulp.spritesmith --save-dev

在gulpfile上面加入：

var spritesmith=require('gulp.spritesmith');

在下面添加：

gulp.task('sprite',function(){

gulp.src(['./img/*.png'])//此处方括号，为数组，可以是多种格式，或者任意几张图片

.pipe(spritesmith({

imgName:'sprite.png',//生成大图的名字，注意加扩展名.png或.jpg

cssName:'sprite.css'//生成css文件名

}))

.pipe(gulp.dest('./dist/sprites'));

})

10. 自动监听

//自动监听

gulp.task('watch', function () {

gulp.watch('*.html', ['htmltask']);//监听文件名  任务名

gulp.watch('css/*.css', ['csstask']);

gulp.watch('js/*.js', ['jstask']);

});

在命令中输入，执行上面的任务

gulp watch