jeff2ma / jgulp

利用Gulp 配置的个人前端项目自动化工作流

JGulp:利用Gulp 配置的前端项目自动化工作流

====

11月18日示：本项目将不再更新，谨慎关注！

JGulp 是本人利用Gulp 配置的适合自己的一个前端项目自动化工作流，目前正在实践运用中（通俗说用得还挺爽）。如果你有需要，可以参考本工作量构建适合自己的工作流。跪求Star，欢迎Fork！

文章介绍：http://devework.com/jgulp.html

功能模块（插件）

小标题含义：功能（对应的Gulp 插件）

Compass（gulp-compass）

一个Sass 框架，本工作流主要是Compass + Sass，因此熟悉这两者是使用本工作流的基础条件。

Sass（gulp-sass）

Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。

本地Web 服务器功能（gulp-webserver + tiny-lr）

能够让你的当前项目目录映射到Localhost 上，本功能主要是为了添加自动刷新（livereload）功能而添加。

网页自动刷新功能（gulp-livereload）

这个功能毫无疑问是最实用的，借助本livereload 模块，一旦监控到有文件改动就自动刷新页面。需要安装相应的Chrome 扩展配合使用。

JS 文件合并（gulp-concat）

JS 文件压缩（gulp-uglify）

图片无损压缩1（gulp-imagemin + imagemin-pngquant）

经过实际使用发现，图片压缩略有损失，但基本无碍。

图片无损压缩2：Tinypng 形式（gulp-tinypng）

借用tinypng 的官方API 进行压缩，支持png、jpg 格式，后续通过 gulp build2 命令即可自动调用。因为服务器在国外原因，有时候会很慢。

文件清理功能（gulp-clean）

在项目完成可以删除一些多余的文件

任务错误中断自动重传（gulp-plumber）

好吧，“任务错误中断自动重传”是我瞎命名的。默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。

自动打包并按时间重命名（gulp-zip）

一般项目完成后需要整理文件并压缩以供交付使用或进行下一阶段的开发，本模块可以实现将项目文件自动打包并按时间重命名。

自动上传文件到远程FTP 服务器（gulp-sftp）

完成开发后，可通过本命令自动上传文件到远程FTP 服务器，以供在线调试

其他（gulp-copy、gulp-rename、opn）

其他杂项模块为该Gulp 添加文件复制、文件重命名、浏览器自动打开项目目录等基础功能

注：

1.因为CSS 代码主要是通过Compass 框架完成，所以本工作流不涉及CSS 压缩等其他功能模块（因为这些功能Compass 本身已经包含）。

2.后续多次用于实战项目后可能会有增减，即不断完善之以让个人前端工作效率最大化。

使用方法

1. 请先确保已经安装Gulp(需要 Node.js 环境) ，建议采用下面的代码全局安装

   $ npm install --global gulp 
   

2. 进入你的项目文件夹下clone 本 git 项目

    $ git clone https://github.com/Jeff2Ma/JGulp.git
   

   clone 后建议删除残留的.git 缓存文件夹，方便添加自己的Git 版本信息管理：

    $ rm -rf .git  
   

3. 安装相关Node 模块

   在项目文件夹目录下通过下面命令安装相关Node 模块

    npm install 
   

4. 按照个人的项目需求，重命名JGulp 文件夹为你自己的项目英文名称，填写Project.md 文件（Project.md文件在项目最终打包的时候会自动重命名为README.md保存在build 文件夹），填写package.json 文件的项目名称部分。如果需要进一步的个性化，可以编辑gulpfile.js 文件。

5. 进行相关配置（如果有需要用到相关功能）：为了安全，将重要的配置信息保存到项目目录下的一个json 文件中，名为 config.json，该文件示例代码如下：

    {
    	"project" : "Gulp", 	
    	"localserver" : {
    		"host" : "localhost",
    		"port" : "8081"
    	},
    	"tinypngapi": "Tinypng API KEY",
    	"sftp" : {
    		"host" : "8.8.8.8",
    		"user" : "username",
    		"port" : "22",
    		"key" : "~/.ssh/sdfsfdsf",
    		"remotePath" :"/"
    	}
    }   
   

相关内容（项目别名、本地服务器域名+端口、Tinypng API KEY、ftp相关信息）请自行配置，为保证安全，config.json文件已经添加到.gitignore 文件中。

6. 然后捏，就基本上可以的了，默认任务：

    $ gulp
   

7. 如果项目已经完成，可以通过build 命令进行项目相关文件收集，项目文件最终会汇集到项目目录下的build 文件夹中方面进一步操作

    $ gulp build
   

   如果需要调用Tinypng 的图片压缩，那么命令需改为：

    $ gulp build2
   

8. 打包build 文件夹下的项目文件，会自动生成项目别名-xxxx.zip 的文件（xxxx 为打包时候的时间）供交付使用或进行下一阶段的开发

    $ gulp zip
   

9. 如果要上传到远程服务器进行线上调试，可以通过该命令自动上传（需提前在 config.json做好配置 ）：

    $ gulp upload 
   

jgulp's Issues

我的想法

我看过你的配置，我很喜欢，如果如果可以加入postcss和jade，在我看来更完美了。

config.json文件在哪？

gulpfile.js文件中的config = require('./config.json');引用的config.json找不到在哪里。
tiny-lr、gulp-webserve和gulp-livereload三个包的用法不是不懂。=.=

无法运行任务

Cannot find module 'vinyl'

我该用什么来配合这个cli呢

我该用什么来配合这个cli呢

compass 任务不成功

控制台提示： Individual stylesheets must be in the sass directory.

为什么buildfiles在其他动作之后？

不是应该先建立发布目录（build），然后再run各种压缩合并处理吗？

body最后的那段代码怎么去掉呀

<script>//<\/script>') //]]></script>

这段代码怎么去掉呀？

跑不起来哦。

1，安装node.js最新版；
2，下载JGulp最新版ZIP解压；
3，创建config.json并修改key；
4，gulp build 运行出错：

You need to have Ruby and Compass installed and in your system PATH for this task to work.

下载
http://rubyinstaller.org/downloads/,
安装（要翻墙）
gem install compass
5，gulp build 运行出错：

D:\xampp1\htdocs\JGulp-master>gulp build
[15:20:40] Using gulpfile D:\xampp1\htdocs\JGulp-master\gulpfile.js
[15:20:40] Starting 'build'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger
ing instead.
[15:20:40] Starting 'imagemin'...
[15:20:40] Starting 'compass'...
[15:20:40] Finished 'compass' after 4.99 ms
[15:20:40] Starting 'minifyjs'...
[15:20:40] Finished 'minifyjs' after 2.47 ms
[15:20:40] Starting 'alljs'...
[15:20:40] Starting 'buildfiles'...
[15:20:40] Finished 'buildfiles' after 3.12 ms
[15:20:40] Starting 'rename'...
[15:20:40] Finished 'build' after 31 ms
[15:20:40] Finished 'alljs' after 19 ms

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: spawn D:\xampp1\htdocs\JGulp-master\node_modules\gulp-imagemin\node_modul
es\imagemin\node_modules\imagemin-optipng\node_modules\optipng-bin\vendor\optipn
g.exe ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

环境：

D:\xampp1\htdocs\JGulp-master>ruby -v
ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32]

D:\xampp1\htdocs\JGulp-master>npm -v
2.7.4

D:\xampp1\htdocs\JGulp-master>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compas
s

D:\xampp1\htdocs\JGulp-master>node -v
v0.12.2

D:\xampp1\htdocs\JGulp-master>gulp build2

[15:33:13] Using gulpfile D:\xampp1\htdocs\JGulp-master\gulpfile.js
[15:33:13] Starting 'build2'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger
ing instead.
[15:33:13] Starting 'tinypng'...
[15:33:13] Finished 'tinypng' after 8.55 ms
[15:33:13] Starting 'compass'...
[15:33:13] Finished 'compass' after 4.23 ms
[15:33:13] Starting 'minifyjs'...
[15:33:13] Finished 'minifyjs' after 2.04 ms
[15:33:13] Starting 'alljs'...
[15:33:13] Starting 'buildfiles'...
[15:33:13] Finished 'buildfiles' after 2.98 ms
[15:33:13] Starting 'rename'...
[15:33:13] Finished 'build2' after 28 ms
[15:33:13] Finished 'alljs' after 16 ms
[15:33:14] Finished 'rename' after 46 ms
[15:33:14] LoadError on line ["54"] of C: cannot load such file -- compass-norma
lize
Run with --trace to see the full backtrace

[15:33:14] Plumber found unhandled error:
 Error in plugin 'gulp-compass'
Message:
    Compass failed
Details:
    fileName: D:\xampp1\htdocs\JGulp-master\sass\style.scss
[15:33:21] gulp-tingpng: [compressing] ✔ info.png (done)

有没有考虑加入autoprefixer处理器

如题所示

关于分开打包的问题

你好，看了下你的gulpfile.js，你是把所有的js的进行打包和压缩，那有没有一种方式，对js，css，img等按照页面分别进行打包，比如js的文件里有index, detail, login等文件夹，每个文件夹都着自己页面的js，分别对index, detail和login里的js进行打包，然后生成：index.min.js, detail.min.js和login.min.js呢

最近我一直在想这个问题，不知道用什么方法进行解决，目前考虑的仅仅是文件夹打包，没有使用seajs或requirejs等