前端自動化構建工具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());
})