gulp介紹

基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。使用gulp能完成以下任務(wù)：

目標

工具

實現(xiàn)過程

1、一鍵安裝項目所有的依賴模塊

創(chuàng)建項目使用命令(項目目錄下)

npm init//生成package.json{ "name": "leason", "version": "1.0.0", "description": "test for angular and gulp and unit testing", "main": "gulpfile.js", "dependencies": { }, "devDependencies": { }, "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "repository": { }, "keywords": [ "leason" ], "author": "leason", "license": "ISC", "bugs": { },}

npm安裝依賴模塊采用命令

npm install xxx --save  //保存到dependencies（生產(chǎn)）npm install xxx --save-dev //保存到devDependencies（開發(fā)）

package.json中保存相應(yīng)模塊，項目重新部署只需要命令

npm install //安裝package中所有模塊

一鍵安裝項目所有的依賴模塊使用bower管理器，用法和npm類似

2、語法檢查

npm install gulp-jshint --save-dev

//代碼語法檢查命令--gulp jshintvar jshint = require('gulp-jshint'); //代碼檢查gulp.task('jshint', function () { return gulp.src(paths.js) .pipe(jshint()) .pipe(jshint.reporter('default'));});

轉(zhuǎn)換html為js模塊

npm install gulp-angular-templatecache --save-dev

//合并html模板命令--gulp templatevar templateCache = require('gulp-angular-templatecache');gulp.task('template', function () { return gulp.src(['./templates/**/*.html','./templates/*.html']) .pipe(templateCache({module: 'templates'})) .pipe(gulp.dest('./js'))});

3、將所有css文件合并壓縮

npm install gulp-cssmin --save-dev

//合并壓縮css命令--gulp deployCSSvar cssmin = require('gulp-cssmin');gulp.task('deployCSS', function() { return gulp.src(paths.css) .pipe(cssmin()) .pipe(concat('all.css')) .pipe(gulp.dest('./build'));});

4、將所有js文件合并壓縮

npm install gulp-uglify --save-dev  //壓縮npm install gulp-concat --save-dev  //合并npm install gulp-sourcemapsy --save-dev //處理 JavaScript 時生成 SourceMapnpm install gulp-strip-debug --save-dev //去除打印