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---打开命令行窗口

   npm  init   

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

  Ctrl+C  结束当前命令

5 在项目中安装

cnpm install gulp --save-dev

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

6 html压缩

安装压缩html的插件

npm install gulp-minify-html --save-dev

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

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

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

//html压缩

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

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

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

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

});

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

 gulp  htmltask

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

7 css压缩

安装压缩css的插件  npm install  gulp-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文件夹

});

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

 gulp  csstask

 

8 js压缩 合并

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

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

gulpfile.js在最上面增加依赖

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

var concat=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文件夹

});

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

 gulp  jstask

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