❶ gulp版本自動化文件中路徑含有變數(絕對路徑)怎麼處理
照你這個圖來的話,要變的是文件夾嗎?例如:v1/a.css 變成 v2/a.css(文件名不變,但內容已變內),還是體現在文件名上容:a.css 變成 a_v1.1.css 或者md5的形式的文件名。看你用了rev,應該是體現在文件名上:
用gulp-rev一般都要和類似gulp-rev-collector這樣的工具搭配,css、js文件的名稱發生變化(也就是生成新版本)之後才會作用於HTML文件(因為要做到新舊文件鏈接[href、src]一一對應並替換),只用gulp-rev應該只會改文件名,但不會更改HTML里的href、src值。 去npm搜 rev-colletor 找找看看有沒有適合的。我一般用gulp-rev-collector。
❷ gulpfile怎麼配置html頁面自動刷新
gulp.task('scripts',function(){
gulp.src([paths.src_js])
.pipe(babel({
presets:['es2015']
}))
.pipe(gulp.dest(paths.dist_js)) //輸出到指定復文件夾
.pipe(connect.reload()) //自動刷新
.pipe(notify({ message: 'Scripts is OK' })) //提醒任制務完成
)}
當你配置好了文件之後就使用命令 gulp 就Ok了,這是就會啟動一個localhost:3333的服務,這是你在進入你的編譯後的文件目錄例如localhost:3333/dist/index.html,這時候你修改了樣式文件或者JS文件等瀏覽器就會實時刷新。
❸ gulp可以生成前端目錄結構嗎
那麼,怎麼樣的目錄才是好的目錄,才是符合用戶體驗和更利於SEO優化的呢? 1:在設計網站目錄時候需要思考用戶是否會點擊。 我們需要知道如果沒有用戶點擊的目錄是毫無意義的,因此,如果你的網站如何有很多沒有用的目錄,就需要進行更改和刪除;...
❹ gulp可以獲取文件所在的路徑嗎
SetupFactory7.0中的文件分為存檔、外部,存檔的文件是要安裝在目標程序目錄上的,外部的打包進安裝程序可以釋放到指定目錄。此外,還有一個不太顯眼的「資源」文件,只有「資源」中的初始文件是臨時釋放到TempFolder進行運行然後自清除的,需要使
❺ gulp沒有安裝在項目根目錄, .babelrc文件在根目錄, 這樣無法編譯es5嗎
右擊計算機或這台電腦選屬性/選擇左面的高級系統設置/性能中的設置/高級內/虛擬內存選項選擇更改容/自動管理取消勾選/點選自定義大小/在初始大小和最大值上添上數值,看下面,添好後按設置選項,在按確定就可以了,當然也可以不用設置,我就是這樣的,不要去掉自動管理所有驅動器的分頁大小選項前面的勾,如果沒有進行勾選按確定就可以了。
一般設置與您的內存大小是有關系的:
建議將初始大小和最大值同時設置為你物理內存的1-2倍,比如2G設置為4096MB(2G內存是2倍),3G設置為4608MB(3G內存是1.5倍),4G內存先設置為4096MB(4G的1倍不夠在加),6-8G內存或更大就選則自動管理就是了,如果你的物理內存是2G,建議升級一下你的物理內存(初始大小和最大值設置要一致)。
如果6-8G或更大的話,您一定要設置,最大值最大是物理內存是1倍,或少設置一點,初始大小設置半倍,因為物理內存越大,虛擬內存就沒必要設置太大了。
❻ gulp 安裝路徑怎麼寫入path路徑
Setup Factory 7.0中的文件分為存檔、外部,存檔的文件是要安裝在目標程序目錄上的,外部的回打包進答安裝程序可以釋放到指定目錄。
此外,還有一個不太顯眼的「資源」文件,只有「資源」中的初始文件是臨時釋放到TempFolder進行運行然後自清除的,需要使
❼ gulp怎麼替換html中的資源路徑.並把html輸出到指定目錄
創建一個空文件夾名字任意,此項目為angular-gulp-seed
mkdir angular-gulp-seed
初始化工程
npm init
創建項目基本目錄結構如下:
+src
+app // 業務模塊
-app.js // 應用入口
+demo // 業務模塊目錄,所有子模塊均遵循此目錄
- mole.js // 模塊聲明文件
- controller.js // vm層
- index.html // 主入口模板
- router.js // 模塊路由文件
- style.css // 模塊樣式
+home
+assets // 靜態資源目錄
-images
-css
+common // 公共服務
+components // 公共組件
+scripts // gulp腳本
- gulp.build.js // build任務
- gulp.common.js // dev,build公共任務
- gulp.config.js // 基礎配置
- gulp.dev.js // dev任務
index.html // 主頁面package.json
正式開始coding
gulp配置部分
1.安裝gulp
npm install gulp -D
2.新建gulpfile文件,安裝browser-sync包,配置第一個任務
var browserSync = require('browser-sync');
gulp.task('browserSync', function () {
browserSync({ server: { baseDir: './', index: 'src/index.html'
}
});
});
gulp.task('default', ['browserSync']);// 執行gulp命令,瀏覽器啟動,可以看到大致頁面結構
3.為了動態插入新加的js和css文件,且添加的文件有一定順序,安裝gulp系列包。
npm install gulp-watch gulp-inject gulp-order -D
4. 新建一個gulp.config.js文件,配置一些基本文件路徑和順序
mole.exports = function () { var src = './src/'; var build = './dist/'; var config = { src: src, build: build, index: src + 'index.html', css: [src + '**/*.css'], appJs: [src + 'app/**/*.js'], commonJs: [src + 'common/**/*.js'], componentJs: [src + 'components/**/*.js'], jsOrder: [ '**/app.js', // 項目主入口
'**/app.*.js', // 主入口相應配置
'**/mole.js', // 模塊聲明
'**/router.js', // 模塊路由
'**/index.js', // 組件、resource入口
'**/*.js' // 其他
], cssOrder: [ '**/app.css', // 項目主模塊
'**/*.mole.css', // 業務子模塊
'**/*.css' // 其他
]
} return config;
}();
5.使用gulp-inject動態插入css和js
js任務編寫
- var config = require('./gulp.conf.js');
- gulp.task('inject', function() { var js = gulp.src(config.js, {read: false}).pipe(order(config.jsOrder)); var css = gulp.src(config.css, {read: false}).pipe(order(config.cssOrder)); return gulp
- .src(config.index)
- .pipe(inject(js, {addPrefix: '../src', relative: true}))
- .pipe(inject(css, {addPrefix: '../src', relative: true}))
- .pipe(gulp.dest(config.src))
- .pipe(browserSync.reload({stream: true}));
- });
頁面添加inject標識
- <!-- css -- >
- <!-- inject:css --><!-- endinject --><!-- js -- >
- <!-- inject:js --><!-- endinject -->
添加到default任務中
- gulp.task('default', ['inject','browserSync']);
執行gulp命令,可看到如圖頁面效果,同時index.html頁面內容發生變化
- <!-- inject:css --><link rel="stylesheet" href="../src/assets/css/app.css"><!-- endinject --><!-- inject:js --><script src="../src/app/app.js"></script><!-- endinject -->
- 6. 開發過程中會不斷添加新的css和js文件,為了優化開發體驗,引入gulp-watch包添加watch任務,當js和css文件發生變化的時候,去執行inject任務
- var watch = require('gulp-watch');
- gulp.task('watch', function() {
- watch('src/**/*.js', function() {
- gulp.run('inject');
- });
- watch('src/**/*.css', function() {
- gulp.run('inject');
- });
- });
- gulp.task('default', ['inject', 'browserSync', 'watch']);
編寫業務代碼
- 1.安裝angular相關包
- npm install angular angular-ui-router --save
- 2.由於代碼量過大,不貼出具體參見src/spp下面代碼實現
src/index.html
src/app.js 項目主入口
src/app.router.js 項目路由配置
mock數據服務
為了前端保持獨立,使用express搭建一個mock服務,然後我們就能愉快的開始開發了。
- 1.首先安裝依賴包:
- npm install express body-parser json-server http-proxy-middleware -D
- 2.創建server.js,內容如下:
- var jsonServer = require('json-server');var server = jsonServer.create();var middlewares = jsonServer.defaults();var bodyParser = require('body-parser');var mockRouter = require('./mock/index');// 添加默認的中間件 logger, static, cors and no-cacheserver.use(middlewares);// 解析 bodyserver.use(bodyParser.json());
- server.use(bodyParser.urlencoded({ extended: false}));
- server.use(mockRouter);
- server.listen(4000, function() { console.log('God bless me no bug, http://localhost:4000');
- });
- 3. mock文件夾下創建index.js,內容如下:
- var fs = require('fs');var express = require ('express');var router = express.Router();
- fs.readdirSync('mock').forEach(function(route) { if (route.indexOf('index') === -1) { require('./' + route)(router);
- }
- });mole.exports = router;
- 4.引入angular-resource.js,使用$resource服務
- npm install angular-resource --save
在common/resource/創建一個utils,具體文件為resourceUtils,為所有請求添加統一前綴
- (function() {
- angular
- .mole('app.resource')
- .factory('resourceUtils', resourceUtils)
- .factory('webResource', webResource);
- resourceUtils.$inject = ['$resource']; function resourceUtils($resource) { return function(apiPrefix) { return function(url, params, actions) { return $resource(apiPrefix + url, params, actions);
- };
- };
- }
- webResource.$inject = ['resourceUtils']; function webResource(resourceUtils) { // 其中***為後端服務的統一前綴
- return resourceUtils('/***/');
- }
- })();
- 5. 在gulpfile.js中統一配置代理,並且修改browserSync任務:
- // 引入http-proxy-middlewarevar proxyMiddleware = require('http-proxy-middleware');// 配置代理路徑,是否為本地mockvar isLocal = true;var target = '';if (isLocal) {
- target = 'http://localhost:4000';
- } else { // API address}// browserSync任務添加代理gulp.task('browserSync', function() { var middleware = proxyMiddleware(['/***/'], {target: target, changeOrigin: true});
- browserSync({ server: { baseDir: './', index: 'src/index.html', middleware: middleware
- }
- });
- });
- 6. 你可能需要添加一些公共的interceptor去處理後端返回的數據或者請求出錯的統一處
至此已經可以在本地愉快的開發了。
配置gulp編譯任務
開發完成以後代碼需要build上線,繼續創建一些task。
- 1.安裝相關依賴包
- npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D
- 2. 配置build任務,具體在scripts/gulp.build.js文件中.3. 頁面html遇到build的地方配置
- ... <!-- build:css css/app.css -->
- <!-- endbuild -->
- <!-- build:js js/common.js -->
- <!-- endbuild -->
- ...
我將gulp的任務全部獨立出去管理,這樣使得gulpfile.js更加清晰
- var gulp = require('gulp');var del = require('del');var runSequence = require('run-sequence');var config = require('./scripts/gulp.conf.js');var buildTask = require('./scripts/gulp.build.js');var devTask = require('./scripts/gulp.dev.js');var commonTask = require('./scripts/gulp.common.js');// 動態添加css和js到index.htmlgulp.task('inject', function() {
- commonTask.inject();
- });// 添加監聽任務gulp.task('watch', function() {
- devTask.watch();
- });// 使用browerSync啟動瀏覽器gulp.task('browserSync', function() {
- devTask.browserSync();
- });// 清除dist文件gulp.task('clean', function() {
- del(config.build);
- });// 打包組件模板gulp.task('build:components-templates', function() {
- buildTask.componentsTemplate();
- });// 打包業務模板gulp.task('build:app-templates', function () {
- buildTask.appTemplate();
- });// build index文件gulp.task('build', ['build:components-templates', 'build:app-templates'], function() {
- buildTask.buildIndex();
- });// 本地開發gulp.task('default', ['inject', 'browserSync', 'watch']);// 線上環境打包gulp.task('dist', ['clean'], function() {
- runSequence('inject', 'build');
- });
在package.json中配置腳本
- "scripts": { "start": "concurrently "gulp" "node server.js""
- }
執行npm start即可本地啟動項目
上線合並代碼的時候執行gulp dist命令即可
拖延症晚期,終於寫完了。有時間會加入eslint校驗,添加md5,添加sass等等。。。需要做的還有很多,看心情吧!
❽ webpack 打包的時候 可以向gulp那樣嗎 文件目錄結構不變
這個任務並不是webpack可以勝任的,雖然webpack cover了一部分gulp/grunt的職能,但是不要忘了webpack的名字,它主要功能還是在於package,所以還是使用gulp/grunt進行上傳吧,至於打包的task可以使用gulp-webpack這類插件來調用webpack。
❾ gulp怎麼樣配置前端目錄結構
那麼,怎麼樣的目錄才是好的目錄,才是符合用戶體驗和更利於SEO優化的呢? 1:在設計網站目錄時候需要思考用戶是否會點擊。 我們需要知道如果沒有用戶點擊的目錄是毫無意義的,因此,如果你的網站如何有很多沒有用的目錄,就需要進行更改和刪除