❶ 如何用gulp读取json文件
varpkg=require('package.json');
这种方式即可
❷ gulp 输出文件什么跟源文件不一样
win7文件夹合并的时候相同文件名不能替换是因为文件夹名相同的情况下,系统为了防止误删原文件夹里的内容,这其实是一种人性化的设计。
❸ gulp中如何排除指定规则的文件
gulp排除文件以：[!+文件描述] 的方式进行排除。不过，记得必须先包括再排除！否则会报错——什么文件都没拿到哪来的排除呢是吧。
随意写了些，没测过。可能有错误，明确两点即可：
先包含再排除。不包含，排除是没有愿意的。而如果排除之后什么都没剩下，那程序也是没法工作的。
知道要什么，不要什么。规则一般使用通配符来进行排除路径描述。要熟悉通配符的意义和使用方法。
例子：
["a/**/*.js","!a/base/**"]//排除base下的任何文件。["a/**/*.js","!a/base*/**"]//排除以base开头的任何文件夹的任何文件。["a/**/*.js","!a/base?/**"]//排除以base开头后接不为空的一个字符的任何文件夹的任何文件。?表示一个字符gulp.src(["a/*/**.js","!a/*.js"])//a/这一层级的js文件会被排除但不包括a/下的子文件夹中的js文件。["a/**/*.js","!a/*/old_*.js"]//排除a/下所有old_开头的js文件。//除开build,simple,images,node_moles目录，匹配根目录下所有的html与php文件['./**/*.{html,php}','!{build,simple,images,node_moles}/**']//排除build与node_moles目录，并排除其他目录下以下划线_开头的html与php文件，匹配其余的html与php文件['./**/!(_)*.{html,php}','!{build,node_moles}/**']//如果要排除的文件描述起来比较复杂，那么建议在使用之前先把要处理的文件整理好，//再在gulp.src()中使用：functionchanged(){//…..处理过程并返回文件路径数组或者字符。returnfoo}//在gulp.src()中使用//…..gulp.src(changed()){//.pipe()}
❹ gulp 怎么给某个文件里增加一个变量
gulp.watch似乎第一个是glob字符串，第二个是任务列表，他不支持回调的
❺ gulp在项目中怎么使用
安装node.js–>http://www.runoob.com/nodejs/nodejs-install-setup.html
安装gulp
【使用npm–>NPM是随同NodeJS一起安装的包管理工具】
cmd进入到需要安装npm的目录 使用命令【本地和全局都需要安装】
npm install gulp 本地安装
npm install gulp -g 全局安装
3.npm init –yes 命令生成package.json
4.安装需要的模块【例如：npm install gulp-less –save-dev】
5.新建gulpfile.js文件–>
a）加载模块require
b）定义任务gulp.task
c） 定义默认任务
d）启动监听更新
e）处理异常不终止watch任务（命令gulp-plumber）
【详情如下】
6.【命令行】编译默认任务–>gulp
编译指定任务–>【gulp <name>】–>例如：gulp less
❻ gulp 用什么方法访问文件内容
1.文件合并：关于文件合并很多人存在这样的疑惑，在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写，我的建议是开发的时候分开写，上线的时候合并为一个，这样的好处是对于浏览器来说，不同页面中相同的文件默认会请求一次缓存下来，其他页面请求相同文件时就直接从缓存中读取，减少文件的网络请求可以提高网页速度，所以文件合并的是很有必要的。 2.文件压缩：既然都合并了，何不再压缩一下呢 3.语法检查：这个功能一般会和下面第4条功能配合使用，当文件修改的时候检查是否有语法错误，并在命令行中输出错误信息。 4.监听文件变化：监听某个目录下文件是否修改，修改的话就执行特定的操作，比如上面几个操作。 以上4点是比较常用的功能，更多功能根据自己需要添加var gulp = require('gulp');var jshint = require('gulp-jshint');//语法检查var concat = require('gulp-concat');//合并文件var uglify = require('gulp-uglify');//压缩代码var rename = require('gulp-rename');//重命名// 语法检查gulp.task('jshint', function () {return gulp.src('public/javascripts/*.js').pipe(jshint()).pipe(jshint.reporter('default'));});// 合并文件之后压缩代码gulp.task('minify', function (){return gulp.src('public/javascripts/*.js').pipe(concat('all.js')).pipe(gulp.dest('public/javascripts/dist')).pipe(uglify()).pipe(rename('all.min.js')).pipe(gulp.dest('public/javascripts/dist'));});// 监视文件的变化gulp.task('watch', function () {gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);});// 注册缺省任务gulp.task('default', ['jshint', 'minify', 'watch']);// gulp.task('default', ['jshint', 'minify']);
❼ gulp 怎么给文件头写入信息
1.文件合并：关于文件合并存疑惑前端发底该所jscss写文件各页面写我建议发候写线候合并处于浏览器说同页面相同文件默认请求缓存其页面请求相同文件直接缓存读取减少文件网络请求提高网页速度所文件合并必要2.文件压缩：既都合并何再压缩呢3.语检查：功能般面第4条功能配合使用文件修改候检查否语错误并命令行输错误信息4.监听文件变化：监听某目录文件否修改修改执行特定操作比面几操作4点比较用功能更功能根据自需要添加var gulp = require('gulp');var jshint = require('gulp-jshint');//语检查var concat = require('gulp-concat');//合并文件var uglify = require('gulp-uglify');//压缩代码var rename = require('gulp-rename');//重命名// 语检查gulp.task('jshint', function () {return gulp.src('public/javascripts/*.js').pipe(jshint()).pipe(jshint.reporter('default'));});// 合并文件压缩代码gulp.task('minify', function (){return gulp.src('public/javascripts/*.js').pipe(concat('all.js')).pipe(gulp.dest('public/javascripts/dist')).pipe(uglify()).pipe(rename('all.min.js')).pipe(gulp.dest('public/javascripts/dist'));});// 监视文件变化gulp.task('watch', function () {gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);});// 注册缺省任务gulp.task('default', ['jshint', 'minify', 'watch']);// gulp.task('default', ['jshint', 'minify']);-
❽ 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.安装gulpnpm install gulp -D2.新建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 -D4. 新建一个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 –save2.由于代码量过大，不贴出具体参见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 -D2.创建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 -D2. 配置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等等。。。需要做的还有很多，看心情吧！
❾ gulp有没有插件可以把js，css文件的内容合并到html页面中
有,关于gulp内容gulp.task('indexHtml', function() { return gulp.src('index.html') .pipe(cheerio(function ($) { $('script').remove(); $('link').remove(); $('body').append('<script src="app.full.min.js"></script>'); $('head').append('<link rel="stylesheet" href=".css">'); })) .pipe(gulp.dest('dist/'));});
❿ 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。
未经允许不得转载：山九号 » gulp文件内容|gulp版本自动化文件中路径含有变量（绝对路径）怎么处理
