gulp入门教程

gulp 入门教程

前言

最近流行前端构建工具，苦于之前使用Grunt，代码很难阅读，现在出了Gulp，真是摆脱了痛苦。现总结之前的工作，整理一个gulp教程给大家看看。

为什么使用Gulp

Gulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、css、js的压缩等等。当然还有许多其它优秀，强大的工具.大家熟悉gulp工具原理之后，自己去学习。

安装gulp

全局gulp安装

如果我们的电脑是第一次使用gulp，我们应该先局安装一遍

$ npm install gulp -g

工程目录gulp安装

然后我们通过命令控制台进入到我们的工程目录（每个工程目录都需要单独安装插件，当然，你也可以把其它项目的插件拷贝过去）

gulp 常用插件

• gulp-less （LESS编辑）
• gulp-minify-css （CSS压缩）
• gulp-util （gulp日志打印，一般安装此插件，用于错误输出，如LESS错误，JS错误等）
• del (gulp生成文件之前清理目录所用)
• gulp-uglify (JS压缩)

npm install gulp gulp-less gulp-minify-css gulp-util del gulp-uglify 

for example

假定，我们的目录，如下图，源文件，页面文件放在htm中，less文件放在assets中，js文件放在src中。我们要求less 编辑成css文件放在css中，less文件编辑后压缩成css,以及js压缩后，放在build中。

在根目录新建gulpfile.js

在gulpfile中引入插件

var gulp = require('gulp'),
	less = require('gulp-less'),
	minifycss = require('gulp-minify-css'),
	gutil = require('gulp-util'),
	del = require('del'),
	uglify = require('gulp-uglify');

编辑LESS文件成CSS，并将CSS放在CSS文件中

gulp.task('css' , function(){
		return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(gulp.dest('./css'));
	});

这段代码的意思就是新建一个css的任务，这个任务读取assets文件夹下面所有的less文件，使用上面定义的less插件，去编辑less文件，如果有错误就输出，最后，通过管道，将编辑好的css文件写入css文件夹中

编辑LESS文件成CSS并将其压缩，并将压缩后的CSS放在build文件中

gulp.task('mincss' , function(){
		return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(minifycss()).pipe(gulp.dest('./build'));
	});

压缩JS文件，并将压缩后的JS文件放在build文件夹中

gulp.task('js' , function(){
		return gulp.src('./src/*.js').pipe(uglify().on('error' , gutil.log)).pipe(gulp.dest('./build'));
	});

然后我们还需要一个任务，用于在gulp生成文件前，将之前生成的文件全部生成

gulp.task('clean', function(cb) {
	    del(['./build/*' , './css/*'] , cb);
	});

最后，我们需要定义一个默认的任务，作为gulp程序的入口

gulp.task('default' , ['clean'] ,  function(){
		gulp.start('css' , 'mincss' , 'js');
	});

写完gulpfile.js文件后，我们运行gulp命令，就可以生成我们需要的文件啦

当然通过上面的配置，我们每保存一次代码，都需要运行一次gulp命令，很是头痛，所以我们需求，增加一个watch任务，来让gulp自动生成文件

	gulp.task('watch' , function(){
		gulp.watch('./assets/*.less', ['css']);
  		//gulp.watch('./src/*.js', ['js']);
	});

最后，附上所有源码

//npm install gulp gulp-less gulp-minify-css gulp-util del gulp-uglify 
var gulp = require('gulp'),
	less = require('gulp-less'),
	minifycss = require('gulp-minify-css'),
	gutil = require('gulp-util'),
	del = require('del'),
	uglify = require('gulp-uglify');
	//autoprefixer ＝ require('gulp-autoprefixer');
	


	gulp.task('css' , function(){
		return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(gulp.dest('./css'));
	});

	gulp.task('clean', function(cb) {
	    del(['./build/*' , './css/*'] , cb);
	});

	gulp.task('mincss' , function(){
		return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(minifycss()).pipe(gulp.dest('./build'));
	});

	gulp.task('js' , function(){
		return gulp.src('./src/*.js').pipe(uglify().on('error' , gutil.log)).pipe(gulp.dest('./build'));
	});

	gulp.task('default' , ['clean'] ,  function(){
		gulp.start('css' , 'mincss' , 'js');
	});

	gulp.task('watch' , function(){
		gulp.watch('./assets/*.less', ['css']);
  		//gulp.watch('./src/*.js', ['js']);
	});