gulp介紹
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)張北,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
基于流的前端自動(dòng)化構(gòu)建工具，利用gulp可以提高前端開(kāi)發(fā)效率，特別是在前后端分離的項(xiàng)目中。使用gulp能完成以下任務(wù)：
目標(biāo)
工具
實(shí)現(xiàn)過(guò)程
1、一鍵安裝項(xiàng)目所有的依賴模塊
創(chuàng)建項(xiàng)目使用命令(項(xià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（開(kāi)發(fā)）
package.json中保存相應(yīng)模塊，項(xiàng)目重新部署只需要命令
npm install //安裝package中所有模塊
一鍵安裝項(xiàng)目所有的依賴模塊使用bower管理器，用法和npm類似
2、語(yǔ)法檢查
npm install gulp-jshint --save-dev
//代碼語(yǔ)法檢查命令--gulp jshint
var 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 template
var 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 deployCSS
var 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 時(shí)生成 SourceMap npm install gulp-strip-debug --save-dev //去除打印
//測(cè)試生產(chǎn)兩種js壓縮命令--生產(chǎn)gulp js --prod測(cè)試gulp js --dev
gulp.task('js', function(type) {
console.log(type);
if (type == 'dev') { // dev
return gulp.src(paths.js)
.pipe(concat('all.js'))
.pipe(gulp.dest('./build'));
} else { // prod
return gulp.src(paths.js)
.pipe(sourcemaps.init())
.pipe(stripDebug())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./build'));
}
});5、根據(jù)現(xiàn)有文件想index中引入
npm install gulp-inject --save-dev
index.html中標(biāo)識(shí)寫入的位置如：
開(kāi)發(fā)環(huán)境
//dev資源引用命令--gulp devIndex
gulp.task('devIndex', ['clean', 'jshint'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.js, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.css, {read: false}), {relative: true}))
// .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});生產(chǎn)環(huán)境
//生產(chǎn)環(huán)境資源引用命令--gulp deployIndex
gulp.task('deployIndex', ['clean', 'jshint', 'template', 'js', 'deployCSS'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true}))
// .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});注意點(diǎn)
代碼混淆過(guò)會(huì)使angular的依賴注入無(wú)法識(shí)別，所以代碼編寫的過(guò)程中要使用嚴(yán)格依賴的寫法。如
angularApp.config(['$routeProvider','$stateProvider','$urlRouterProvider',function($routeProvider,$stateProvider,$urlRouterProvider) {
$stateProvider
.state('sidebar', {
url: '/sidebar',
// abstract: true,
templateUrl: 'templates/sidebar.html',
controller: 'sidebarCtrl'
})
$urlRouterProvider.otherwise('/sidebar/tab1');
}]);總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
