在hbuilder上怎么启动gulp的任务

随着 node 的出现， javascript 的舞台越来越大，能做的事情越来越来。 本篇，我们来聊一聊前端工程化构建工具 Gulp , 并定制符合特定需求的 Gulp 插件 。 Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。 废话说完，接下来，都是干货啦！ 完全展开以后是这样的 注意， 如果希望 gulpfile 文件也能写es6 语法， 需要装个库： yarn add @babel/register。所有已配好，此处用的是 gulp.babel.js 下面一个一个来分解： package.json 先用 yanr install 装一下需要用到的包 1. 关于 gulp 的pipe pipe 意味管道， 很好理解，文件流通过 pipe 管道， 那么就可以在这个过程中对文件流进行操作，定制自己的需求。 所有的处理都是在 pipe 中进行的。例如上图中的例子, ！！那么同理： 我们也可以加入自己写的 gulp 插件 对文件流进行处理 2.实现 我们先来实现一个很简单的功能， 比如 在所有的 js 文件里添加注释 this is js， 在所有css 文件里添加注释 this is css， 在所有其他类型的文件里添加 this is other。 具体实现如下： selfPlugin.js

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1.打包工具 2.模块化识别 3.编译模块代码方案用所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：sudo npm install -global gulp-cli全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：npm install gulp如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：（可以不执行）npm install --save-dev gulp这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大体就是为了版本的灵活性，但如果没理解那也不必太去纠结这个问题，只需要知道通常我们是要这样做就行了。

1.首先 创建 pakeage.json 文件（包依赖）1npm init接着会出现如下，提示（如果不填任何东西，直接按回车直到出现 yes 确认就行，以后也可以修改这个文件）2.安装 gulp1234npm i -D gulpnpm i -D gulp-connect//or npm i -D gulp gulp-connect// i -D 等同于 install --save-dev3.新建 gulpfile.js 文件,并编辑（复制下面内容）1234567891011var gulp = require("gulp"), connect = require("gulp-connect");gulp.task("webserver", function() { connect.server({ livereload: true, port: 2333 });});gulp.task("default", ["webserver"]);4. 在命令行输入 gulp，接着可以用浏览器访问 localhost:2333，此时文件结构如下图

创建一个空文件夹名字任意，此项目为angular-gulp-seedmkdir angular-gulp-seed初始化工程npm init创建项目基本目录结构如下：+src+app            // 业务模块-app.js    // 应用入口+demo   // 业务模块目录，所有子模块均遵循此目录- module.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正式开始codinggulp配置部分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文件,配置一些基本文件路径和顺序module.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",  // 主入口相应配置"**/module.js", // 模块声明"**/router.js", // 模块路由"**/index.js",  // 组件、resource入口"**/*.js"       // 其他],        cssOrder: [            "**/app.css",       // 项目主模块"**/*.module.css",  // 业务子模块"**/*.css"          // 其他]}    return config;}();5. 使用gulp-inject动态插入css和jsjs任务编写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.htmlsrc/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);   }});module.exports = router;4. 引入angular-resource.js，使用$resource服务npm install angular-resource --save在common/resource/创建一个utils,具体文件为resourceUtils，为所有请求添加统一前缀(function() {   angular       .module("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后却报错 gulp: command not find，查找了好多资料都无果。最后发现原来是我的node没有安装到C盘，而node又内含npm，所以不仅要修改.npmrc的配置，还有更改环境变量。以下是我的解决方案步骤，供大家参考。 在node的安装目录下得到这个路径：查看是否修改成功 找到npm的安装路径。（F:workspaceaodianyunzyytestes6 est ode_modules） 最后还需要告诉系统，node和npm的位置，这时候需要在“环境变量”的对话框“系统变量”这一栏中找到“path”变量。 增加 node中npm的安装地址：D: ode ode_modules pm; 如果node的全局变量地址（C:ProgramFiles odejs ode_global）改变也需要增加到环境变量中

比较好的解决办法是，首先创建 package.json 文件，然后显示`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

倭工作时间孤

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文件等浏览器就会实时刷新。

fetch failed 下载超时。。。npm换成淘宝的镜像源试试

最近在用nodejs将公司商城的底层重写。基于nodejs的强大，我从原本的只写前端变成了写全栈。 框架采用express,模板用ejs,前端用amazeui. 做完三个页面后，设计突然说要改UI设计，我勒个去，郁闷地一个个页面重新调整。下班之后反思一下，觉得花了太多时间在重复劳动上，是时候涉猎一下前端工程化的知识了。 用百度在互联网畅游了一番，总结了一下前端工程化的几个关键要素：编码规范化，结构模块化，流程自动化。本文所述的方法属于模块化，但只是简单地把dom，css,js拆分，以便更好地管理，而并非像vue框架那样的组件化，但这种方式可能更易于理解，可以作为过渡。 这是原来的目录结构 其中public目录里存放的是静态资源，按照传统的做法，css文件夹种存放less文件和css文件，img文件夹中存放图片资源，js中存放各页面（views目录中对应的页面）的js文件。 当页面越来越多，会遇到一些重复的部分。像图中的侧边菜单，顶部搜索框，底部菜单，在几个页面都有。如果每个页面拷贝一份样式，js，dom,当需求方要更改样式或者增加功能的时候，徒增工作量。 在一篇文章的启发下（ 前端开发工程化探讨 ），我将目录结构改成如下： 为了标准化，每个组件里的文件命名都相同。以侧边工具栏为例，dom.ejs是一个模板文件： 如果不熟悉ejs模板的语法，可以百度一下。另外，此模板还支持嵌套，并传入参数。 例如，下面是一个列表容器的dom结构，配合js可以实现上拉加载功能，但列表项的样式可能不一样，你可以在使用时再根据传入的templateName参数决定用哪个模板，非常灵活。 在使用模板时，这样嵌入页面。 注意，应使用<%-include()%>,而非<%=include()%>。<%-%>表示内容原样输出，不进行运算。而<%=%>会生成运算后的内容。 然后，再来考虑js和css文件应当怎么处理。如果在页面中逐个引入组件的js和css文件，维护起来会非常不方便。所以我考虑将某个页面涉及到的组件，还有页面本身的js和css打包成一个。这样做有个缺点，每个页面的js和css文件会有重复的内容。如果用seajs或requirejs等模块加载，可以解决重复的问题，但也可能增加项目的复杂度。考虑到打包后的文件只有10K大小，还是暂时使用打包的方法。有兴趣的朋友也可以将js模块化并测试一下性能。 打包涉及到gulp的应用，有许多文章谈论到，而我是通过开源项目学习的。 首先我需要写一个page-config.json文件，告诉gulp我要打包哪些资源： 将文件放在模板目录的根目录下面，与src,dist同级。src存放原文件，dist存放生成后的文件。 再写一个gulpfile.js,用于自动构建。 下面是gulp文件的写法： 在使用时，要在命令行安装gulp，切换到gulpfile.js所在的目录，运行gulp watch，这样，每次在css和js更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。

可以的，用gulp来处理CSS和JS的编译、压缩等，然后供webpack引入使用，webpack的配置文件也可以写gulp的task()里面，怎么用就看具体开发需求了。

合并成一个JS文件之后，代码的作用域扩大，难免会造成冲突。找到报错的代码所在位置，找到原JS文件修改下。举个例子：a.js 中有var foo = 1; b.js 中也有 var foo = 10; 那么合并之后就会有两个 foo 变量， 这样一来在新的js文件中，foo的值就是写在后面的一个，而恰好后面的值会冲突报错。因此，在合并之前需要确定每个js文件都能正常工作，而且没有函数、变量上的冲突。

1．package.json文件部分插件 plugins "dependencies": { "del": "^1.1.1", "gulp": "^3.8.11", "gulp-autoprefixer": "^2.1.0", "gulp-cache": "^0.2.8", "gulp-clean": "^0.3.1", "gulp-concat": "^2.5.2", "gulp-imagemin": "^2.2.1", ... }2．安装所需的gulp插件$ npm install3．gulpfile.js"use strict";var gulp = require("gulp");/*global -$ 加载需使用的gulp插件*/var $ = require("gulp-load-plugins")();配置选项(也可以直接在任务中写相对路径)/* *管理资源文件路径集合 *config.static下 *css scripts images 替换为自己的路径(可按照此配置管理) */var config = {};// 源资源文件路径config["static"] = { styles: "static/styles/*.*", scripts: "static/scripts/*.*", images: "static/images/*.*", html:"static/*.html"};...图片任务流处理方法/* *images 任务流 */gulp.task("images", function () { return gulp.src(config["static"].images) .on("error", function (err) { console.error("Error!", err.message); }) .pipe($.imagemin({ distgressive: true, progressive: true, interlaced: true, svgoPlugins: [{removeViewBox: false}], use: [require("imagemin-pngquant")()] })) .pipe(gulp.dest(config["rev"].images)) .pipe($.notify({ message: "images task complete" }));});/* *img 添加版本任务流 *use gulp-rev to version the rev files and generate the "rev-manifest.json" file */gulp.task("img", ["images"], function(){ return gulp.src(config["rev"].images_file) .pipe($.rev()) .pipe(gulp.dest(config["dist"].images)) .pipe($.rev.manifest({ base: "dist", merge: true //如果存在 rev-manifest.json文件则合并 })) .pipe(gulp.dest("dist"));});css任务流处理方法 详见js任务流处理方法 详见加入版本任务流处理方法gulp.task("rev",["img","css","js"], function () { gulp.src(["rev-manifest.json", config["static"].html]) .pipe( $.revCollector({ replaceReved: true, dirReplacements: { //路径替换 // "css": "/dist/css", // "/js/": "/dist/js/", // "cdn/": function(manifest_value) { // return "//cdn" + (Math.floor(Math.random() * 9) + 1) + "." + "exsample.dot" + "/img/" + manifest_value; // } } }) ) .pipe($.minifyHtml({conditionals: true, loose: true})) .pipe(gulp.dest("dist")); gulp.task("del", require("del")("rev"));//最后删除过渡文件目录});开启任务gulp.task("test", ["clean"], function () { gulp.start("rev");});

比较好的解决办法是，首先创建 package.json 文件，然后显示`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

　　比较好的解决办法是，首先创建 package.json 文件，然后显示`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

1、易用  Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。 2、高效  Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。 3、高质量  Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。 4、易学  Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。 5、流  使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。 6、代码优于配置  维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

比较好的解决办法是，首先创建 package.json 文件，然后显示`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

var webpack = require("webpack");var glob = require("glob");var debug = true;function getEntry() {    var entry = {};    glob.sync(__dirname + "/app/js/*.main.js").forEach(function (file) {        var name = file.match(/([^/]+?).main.js/)[1];        entry[name] = __dirname + "/app/js/" + name + ".main.js";    });    return entry;}//used while add min extfunction getExt() {    return debug ? ".min.js" : "js";}module.exports = {    // context: __dirname + "/app/",    entry: getEntry(),    devtool: "source-map",    externals: {        jquery: "window.$"    },    output: {        path: __dirname + "/build/js",        filename: "[name].js",// + getExt(),        sourceMapFilename: "[file].map"    },    module: {        noParse: [],        loaders: [{            test: /.jsx?$/,            loader: "babel",        },            {                test:/.less$/,                loader:"style!css!less",                options: {                    modules: true,                    localIdentName: "[path][name]__[local]--[hash:base64:5]"                }            }        ]    },    debug: debug};

为什么gulp中的sourcemaps没起作用　　比较好的解决办法是，首先创建 package.json 文件，然后显示`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

如果全局安装了 gulp 相关module，比如 gulp-concat，可以用如下方式引入到当前项目里： npm link gulp-concat --save-dev

可能存在的原因：css的引用路径是否准确（浏览器打开HTML文件，然后右键查看源码，点下引入的css，看看能不能打开），能则下一步。less编译的css存放路径是否准确。生成之后，看下前后两次生成的css文件是否有变化。有则往下分析；要想效果实时生效，需要浏览器能自动刷新或者自动加载，这是必要，不然即使less能自动化编译，但如果浏览器不能自动刷新或者自动加载，那效果也是不能实时改变的。目前能实现浏览器页面自动刷新的gulp插件有：gulp-connect，不知道你用进去了没，没用的可以试试？gulp-connect 配置问题或者浏览器livereload插件没有工作。如果确定配置没问题，可以在命令行窗口按Ctrl+C停掉gulp任务，然后重新运行gulp任务就好。ps:还不行的话，建议把gulpfile.js源码发来大家看看找出原因。

1.gulpfile.jsvar gulp = require("gulp"),uncss = require("gulp-uncss");gulp.task("uncss", function() {gulp.src("src/css/origin.css") //冗余css文件.pipe(uncss({html: ["src/origin.html"] //使用css的html页面，可多个})).pipe(gulp.dest("build/css/uncss")); //输出目录});2.cnpm 也可以使用npmcnpm install gulp-uncss --save-dev

1．package.json文件部分插件 plugins "dependencies": { "del": "^1.1.1", "gulp": "^3.8.11", "gulp-autoprefixer": "^2.1.0", "gulp-cache": "^0.2.8", "gulp-clean": "^0.3.1", "gulp-concat": "^2.5.2", "gulp-imagemin": "^2.2.1", ... } 2．安装所需的gulp插件 $ npm install 3．gulpfile.js "use strict"; var gulp = require("gulp"); /*global -$ 加载需使用的gulp插件*/ var $ = require("gulp-load-plugins")(); 配置选项(也可以直接在任务中写相对路径) /* *管理资源文件路径集合 *config.static下 *css scripts images 替换为自己的路径(可按照此配置管理) */ var config = {}; // 源资源文件路径 config["static"] = { styles: "static/styles/*.*", scripts: "static/scripts/*.*", images: "static/images/*.*", html:"static/*.html" }; ... 图片任务流处理方法 /* *images 任务流 */ gulp.task("images", function () { return gulp.src(config["static"].images) .on("error", function (err) { console.error("Error!", err.message); }) .pipe($.imagemin({ distgressive: true, progressive: true, interlaced: true, svgoPlugins: [{removeViewBox: false}], use: [require("imagemin-pngquant")()] })) .pipe(gulp.dest(config["rev"].images)) .pipe($.notify({ message: "images task complete" })); }); /* *img 添加版本任务流 *use gulp-rev to version the rev files and generate the "rev-manifest.json" file */ gulp.task("img", ["images"], function(){ return gulp.src(config["rev"].images_file) .pipe($.rev()) .pipe(gulp.dest(config["dist"].images)) .pipe($.rev.manifest({ base: "dist", merge: true //如果存在 rev-manifest.json文件则合并 })) .pipe(gulp.dest("dist")); });

http://www.tuicool.com/articles/Yr2YZvE这篇文章不错 推荐下

gulp用的比较多吧，因为gulp能做的事情比webpack多一些，毕竟gulp看起来更像一个任务事务处理器，能做很多事情，webpack大部分时候用于web页面开发。

找一个有网的电脑把安装包下载到U盘，再把U盘插到无网电脑上面安装

用through2这个插件。jsvar through = require("through2");gulp.task("xx",function(){ return gulp.src("src/js/*.js").pipe(through.obj(function(file,enc,cb){console.log(file.relative);console.log(file.path);this.push(file);cb();}))});

如果你的 gulp 脚本只是为了调用 webpack 来打包，那就是可以代替的。问题是 gulp 是以流的形式来执行多项依赖任务，它提供的功能是处理任务依赖和任务流。而 webpack 主要用于打包前端资源，将模块化的JS打包成单一文件(或少量入口+公用文件)。作用不同，不可能完全互相替代。

你是装到项目里面吗？安装到项目：npm install --save-dev gulp这样装都有的node_modules目录的，不过前提是：只能在项目根目录执行，并且已经初始化，也就是要有package.json文件。

原理对MD5算法简要的叙述可以为：MD5以512位分组来处理输入的信息，且每一分组又被划分为16个32位子分组，经过了一系列的处理后，算法的输出由四个32位分组组成，将这四个32位分组级联后将生成一个128位散列值。在MD5算法中，首先需要对信息进行...

我用Atom，然后安装gulp插件，可以直接点击stop task，挺好用的。插件：bottom-dock 插件：gulp-manager package 开启、关闭：Ctrl+k+t

“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；“**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

脚本库;可以把NPM看做是开发工具,比如Grunt和Gulp。这些开发包都是通过一个JSON格式的文件来进行统一...如何答题 获取采纳 使用财富值 玩法介绍 知道商城 知道...

方法/步骤 首先要确保pc上装有node，然后在global环境和项目文件中都install gulp npm install gulp -g (global环境) npm install gulp --save-dev (项目环境) 在项目中install需要的gulp插件，一般只压缩的话需要 npm install gulp-minify-css

解决方法： 第1步：先cd到当前目录中，如果是webstorm打开Terminal默认就是当前项目，使用以下命令，回车即可：npm link gulp 第2步：配置node相关的环境变量，即node_modules的安装目录：使用以下命令：npm root -g 获得安装路径，然后 vim ~/....

路径错误。应该这样才对。C:UsersadminDesktopxxxPhysicalCLoudPhysicalCloud> gulp

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。完成nodejs安装之后，需要使用npm安装gulp。先安装全局gulpnpm install -g gulp然后在项目根目录下安装本地gulp。此时项目根目录下会多出下面这个文件夹 node_modules好的，现在gulp已经安装完成了，但是gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能，先安装相应的插件：1.css压缩 gulp-minify-css2.js压缩 gulp-uglify3.js合并 gulp-concat由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：

　　使用 gulp 搭建前端环境入门篇　　1. gulp 入门基础　　2. 配置常用插件　　3. ES6 代码转化　　4. 完整演示示例　　5. 参考文档　　原文链接　　gulp 入门基础　　1.全局安装 gulp ：　　$ npm install --global gulp　　2.作为项目的开发依赖 （devDependencies）　　$ npm install --save-dev gulp　　3.在项目根目录下面创建一个名为 gulpfile.js 的文件：　　$ touch gulpfile.js　　// 配置 gulp 的相关任务　　4.运行 gulp：　　$ gulp　　配置常用插件　　下面的步骤从零开始动手搭建环境　　1.检查你的 node 版本和 gulp 版本　　node -v　　// => v4.0.0　　gulp -v　　// => CLI version 3.9.0　　// => Local version 3.9.0

Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp/Grunt是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。说到browserify/webpack，那还要说到seajs/requirejs。这四个都是JS模块化的方案。其中seajs/require是一种类型，browserify/webpack是另一种类型。seajs/require:是一种在线"编译"模块的方案，相当于在页面上加载一个CMD/AMD解释器。这样浏览器就认识了define、exports、module这些东西。也就实现了模块化。browserify/webpack:是一个预编译模块的方案，相比于上面，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是AMD/CMD/ES6风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

可以通过生成 sourcemap 来还原。可以了解一下 gulp-sourcemaps 这个模块

gulp.task("upload", function() {return gulp.src( jadeWorkDir + "/**" ).pipe(sftp({host: jadeConfig.sftp.host,user: jadeConfig.sftp.user,port: jadeConfig.sftp.port,key: jadeConfig.sftp.key,pass: jadeConfig.sftp.pass,remotePath: jadeConfig.sftp.remotePath}));});如上写task，需在执行任务路径后加 "/**" or "**" 通配符进行匹配。如果没有，则会出现这样的问题：gulp-sftp: No files uploaded

我们的官网要改版，会从以前的单一产品变成系列产品的官网，也就是现在的官网会是之后官网的一个子模块。趁着这个机会，正好重新梳理了一下结构。加上罪恶之主管的一些要求，具体的需求如下：分模块，每个模块都有独立的页面和静态文件，并将所有静态文件打在一个文件夹下，一些常用变量可以进行替换，并可进行简单的页面动态生成，生产环境打包与线上环境打包分开进行，静态文件进行压缩合并，加md5以及cdn，wap的静态文件与web端分离，wap的页面文件没有的继承web端的页面文件，有的要用它本身。打包由grunt换成gulp。整体的路径要像这样：

ctrl+alt+s打开setting菜单，找到external tools点+号，在tool setting里填空：program -> 外部命令所在位置，填入npm的完整路径parameters -> 参数，这里设为 $Prompt$运行命令时表示弹个窗口让你输入Working Directory -> 在哪个目录下运行这条命令，输入$ProjectFileDir$表示在当前项目的根目录下运行。点右边的insert macro可以看到更多的选项，除了macro的说明，webstorm还会告诉你对应macro在当前环境下是个什么值的，不怕看不懂e文了。

并没有这个参数你得再 entry 加入如下var config = require("./webpack.config.js");config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");var compiler = webpack(config);var server = new webpackDevServer(compiler, {...});server.listen(8080);

是gulp.task() 。不是gulp.tast()

看你的.src()是怎么写的，./src/**/*.* 这样应该不会漏的。但如果指定类型或者路径不完整，不是该类型的就会被漏掉子目录也会漏掉。举几个常用的例子吧（如有错误请指正）：./src/**/*.* （包含所有文件）./src/**/*.html (包含目录下所有HTML文件)./src/*.html （子目录的文件会被忽略）./src/*/*.html (仅包括子目录里的文件，例如不包括./src/a.html)

有区别web前端打包工具1、WebpackWebpack: 是模块化管理工具和打包工具，他的宗旨是一切静态资源皆可打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个捆绑包。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片等。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，可以配合使用。Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。

一、某些软件运行时在任务栏列表中是不可见的，而是以进程的方式在后台运行，常见的有来电防火墙、短信防火墙类软件、杀毒软件、加密软件等需要实时监 控的软 件，因此，当 无 法删除 正在运行中的软 件；二、解决方法 为：1、用进程管理器查看进程表， 如你能判断哪个线程是该程序的进程，则可以关闭它，如无 法判断则可以先设臵不显示系 统进程；2、然后关闭所有的非系统 进程，这样就可以 到程序管理里 正常卸载软件了。