❶ 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:在设计网站目录时候需要思考用户是否会点击。 我们需要知道如果没有用户点击的目录是毫无意义的,因此,如果你的网站如何有很多没有用的目录,就需要进行更改和删除