您好,登錄后才能下訂單哦!
gulp介紹
基于流的前端自動(dòng)化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項(xiàng)目中。使用gulp能完成以下任務(wù):
目標(biāo)
工具
實(shí)現(xiàn)過程
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(開發(fā))
package.json中保存相應(yīng)模塊,項(xiàng)目重新部署只需要命令
npm install //安裝package中所有模塊
一鍵安裝項(xiàng)目所有的依賴模塊使用bower管理器,用法和npm類似
2、語法檢查
npm install gulp-jshint --save-dev
//代碼語法檢查命令--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í)寫入的位置如:
<!doctype html> <html> <head> <meta charset="utf-8"> <title ng-bind="headTitle"></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <!-- bower:css --> <!-- endinject --> <!-- inject:css --> <link rel="stylesheet" href="build/all.css" rel="external nofollow" > <!-- endinject --> <!-- bower:js --> <!-- endinject --> <!-- inject:js --> <script src="build/all.min.js"></script> <!-- endinject --> </head> <body ng-app="starter"> <div ui-view></div> </body> </html>
開發(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)
代碼混淆過會(huì)使angular的依賴注入無法識(shí)別,所以代碼編寫的過程中要使用嚴(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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。