前端自动化构建工具gulp的使用介绍

gulp是基于流的自动化构建工具

简介：

gulp是前端开发过程当中对代码进行构建的工具，是自动化项目的构建利器；她不只能对网站资源进行优化，并且在开发过程当中不少重复的任务可以使用正确的工具自动完成；使用它，咱们不只能够很愉快的编写代码，并且大大提升咱们的工做效率。经过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理，比grunt的效率更高。

 

gulp经常使用地址：

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

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

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424

利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。

1.首先安装nodejs环境

下载地址 https://nodejs.org ，下载后默认一直点击下一步就行，安装node后自动安装了npm包管理工具。

2.全局安装gulp

 npm install -g gulp 会从github下载安装。安装完成后  gulp -v能够查看版本号

3.做为项目的开发依赖安装gulp

cd 到你的项目根目录

npm install gulp --save-dev

完成后在项目根目录会增长node_module文件夹，这就是node管理包的文件夹，安装的东西都在里面

(--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；)

4.在你的项目根目录新建gulpfile.js

var  gulp = require('gulp');

gulp.task('default',function(){
    console.log('task....');    
});

5.在你的项目路径下，运行 gulp 命令就会在控制台打印  task...信息

(gulp后面能够加 task的名字，不加的话，默认运行 ‘default’)

至此你就会使用gulp了

6.安装经常使用gulp插件

npm install gulp-ruby-sass gulp-minify-css gulp-clean gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

须要用到时就使用require引入便可，相似var  rename = require('gulp-rename');

'use strict';
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var clean = require('gulp-clean');
gulp.task('default',['rename'], function(){
	gulp.src('js/index.js')
	//.pipe(gulp.dest('dist/'))
	.pipe(uglify())
	.pipe(rename('index.min.js'))
	.pipe(gulp.dest('dist/'));
});

gulp.task('concat', function(){
	gulp.src('js/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('dist/'));
});

gulp.task('rename',function(){
	gulp.src('js/**/*.js')
	//.pipe(rename({suffix:'.txt'})) 
	.pipe(rename(function(path){
		path.extname = ".txt"  //修改后缀名
	}))
	.pipe(gulp.dest('dist/'))
	.pipe(notify({message:'task ok'}));;
});

gulp.task("clean", function(){  //删除文件
    return gulp.src('dist')
        .pipe(clean());
})