glup命令

㈠ gulp压缩合并css/js时，怎么自动修改引用压缩后的css/js的路径

记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件，当然这一系列操作都是用基于gulp插件的，主要会用到下面的几个插件：
var concat = require('gulp-concat');//- 多个文件合并为一个；var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行； var rev = require('gulp-rev');//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');//- 路径替换

安装Gulp插件到本地项目
npm init//- 生成一个 package.json，里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内

完成上面两步后，会在我们的项目内生成一个package.json文件以及一个node_moles目录
创建配置文件 gulpfile.js
在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~)，内容就是上面几个插件的配置信息：
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多个文件合并为一个；var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行；var rev = require('gulp-rev'); //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector'); //- 路径替换gulp.task('concat', function() { //- 创建一个名为 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要处理的css文件，放到一个字符串数组里
.pipe(concat('wap.min.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('./css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内});

gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录});

gulp.task('default', ['concat', 'rev']);

运行结果
通过以上的配置之后，就可以开始运行 gulp 对我们的项目进行相关的操作啦；
使用 gulp 命令，运行Gulp.js 构建程序
首先运行 concat 这个 task 生成一个 rev-manifest.json 文件
然后再运行 rev 这个 task 替换掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$

rev-manifest.json文件内容：
{ "wap.min.css": "wap.min-c49f62a273.css"}

header.php替换前后对比：
替换前：<link rel="stylesheet" href="/css/wap.min.css" />
替换后：<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的，所以要先成生 .json 文件，然后再进行替换；

㈡ 执行gulp命令报错，怎么办

uglify解析时出错了，看下问题出在哪儿
.pipe(uglify().on('error', function(e) {
console.log(e);
})

㈢ 如何使用gulp解决内核前缀问题

检查你的 node 版本和 gulp 版本
1、如果没有安装node可以参考我的《CentOS 7下手把手搭建hexo博客》中使用nvm来管理node；
2、如果没有安装gulp可以使用npm install --global gulp全局安装 gulp；
3、检查你的 node 版本和 gulp 版本；
$ node -vv5.0.0$ gulp -v[19:21:35] CLI version 3.9.0[19:21:35] Local version 3.9.0

初始化项目目录
使用 npm init 创建一个 package.json 存储依赖关系等配置信息，推荐使用，如图给出一个例子；；
创建 gulp 的配置文件 gulpfile.js，开始很简单，如图：
使用git init 创建版本库，并简单配置，如果不熟悉git操作可以去官网先看看;

测试gulp命令
$gulp
如图所示一切ok，现在没有任务；

安装依赖插件
$ npm install --save-dev gulp-autoprefixer browser-sync gulp-notify
其中：

gulp-autoprefixer 根据浏览器版本自动处理添加浏览器前缀

browser-sync 能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面

gulp-notify 用于任务提醒
安装过程比较长慢慢等待，不过一定要确认安装成功；

安装成功之后package.json会保存插件，当前目录下会创建目录node_moles保存安装的插件；

5
以 browser-sync 为例来配置 gulpfile.js 文件
1、修改gulpfile.js如图所示：
2、创建源码目录src；
3、终端运行gulp，当修改文件的时候终端会发生变化；

㈣ gulp不是内部或外部命令，也不是可运行的程序 或批处理文件.怎么解决

javac不是内部或外部命令，也不是可运行的程序或批处理文件解决办法： 1.安装jdk,安装方法：在官网下载好jdk之后，双击安装包，进入安装即可； 2.配置环境变量： a.JAVA_HOME:jdk安装目录 b.CLASSPATH:.;%JAVA_HOME%\lib” c.PATH:%JAVA_HOME%\bin 配置环境变量方法： 1.点击计算机，右键弹出菜单，选择属性； 2.进入属性之后，选择高级系统设置； 3.点击环境变量，然后依次添加环境变量已经变量值即可。

㈤ 怎么用gulp压缩js和css文件

/步骤
首先要确保pc装nodeglobal环境项目文件都install gulp
npm install gulp -g (global环境)
npm install gulp --save-dev (项目环境)

项目install需要gulp插件般压缩需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更插件链接找
项目根目录新建gulpfile.jsrequire需要mole
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
压缩css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //压缩文件
.pipe(gulp.dest('minified/css')) //输文件夹
.pipe(minifycss()); //执行压缩
});
压缩js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所jsmain.js
.pipe(gulp.dest('minified/js')) //输main.js文件夹
.pipe(rename({suffix: '.min'})) //rename压缩文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输
});
执行压缩前先删除文件夹内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默认命令cmd输入gulp执行命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});

要cmd执行gulp即

㈥ 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等等。。。需要做的还有很多，看心情吧！

㈦ 如何在linux下安装gulp

npm-ginstallgulp

sudonpminstall-ggulp

npminstallgulp

㈧ gulp 怎么将es6转为es3

gulp在3.9版本里面增加了对babel的支持，因此我们可以直接在gulpfile里面使用ES6(ES2015)了。

升级gulp版本

首先要检测一下我们的gulp版本，确保CLI版本及Local版本都在3.9之上:
gulp -v

版本如下：
CLI version 3.9.0
Local version 3.9.0

若版本过低，我们可以通过以下方式进行升级，这里将同时升级CLI版本和Local版本：
npm install gulp -g && npm install gulp --save-dev

安装babel

我们需要安装babel-core及babel-preset-es2015来转换ES6代码：
npm install babel-core babel-preset-es2015 --save-dev

然后，创建一个.babelrc文件来使用es2015 preset：
touch .babelrc

写入如下内容：
{
"presets": ["es2015"]
}

接下来就是使用ES6语法重写gulpfile了。

使用ES6语法重写gulpfile

首先，重命名gulpfile.js为gulpfile.babel.js，这样gulp执行前会自动调用babel转换文件。
mv gulpfile.js gulpfile.babel.js

然后在gulpfile.babel.js里面用ES6语法写些内容，如下：
'use strict';

import gulp from 'gulp';
import less from 'gulp-less';

const paths = {
less: 'less/',
dest: 'build/'
};

gulp.task('less', () => {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
});

然后执行gulp命令：
gulp less

这里和原来一样，以前的命令怎么用现在还是怎么用!

GitHub源码：using-es6-with-gulp

㈨ 全局方式安装gulp是什么意思

npm-ginstallgulp

如果是 Linux 或者 Mac，你可能需要在前面加 sudo

sudonpminstall-ggulp

上面的命令中个，-g 代表全局安装，安装之后你可以直接在终端执行 gulp 命令。

npminstallgulp

如果不实用 -g 参数，gulp 会被装在当前目录下的 node_moles 目录中，不能直接通过 gulp 命令使用，需要你手动改环境变量。

㈩ gulp在项目中怎么使用

1. 安装node.js-->http://www.runoob.com/nodejs/nodejs-install-setup.html

2. 安装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