gulp或者grunt中有哪些神一般的task?

因為是在gulp-css-spriter基礎上改了一丟丟，所以取名為2，

這個 task 寫完後感覺挺有趣的. 這個 task 可以讓 gulp 監測 gulpfile 自身的改動, 並且重新啟動自己 :D. 完蛋了, 人工智慧崛起後這種程序好可怕的趕腳.

這個 task 的用途是用 gulp watch 文件的改動並啟動相應的 task ( 我們用 gulp 做增量開發基本都會這麼搞 ). 有趣的地方在於如果 gulpfile 自身發生了改動, 那麼 gulp 將會重新啟動自己. 為了達到這個目的, 這裡需要做兩層 watch, 通過 gulp watch 去啟動 child process 的 deep-watch, 這樣當 gulp 自身改變了以後, 他重啟的部分是 deep-watch. 愚蠢的人類啊, 以為逃出 Matrix 來到 Sion 就是現實了?

var Path = require("path");
var Chalk = require("chalk");

gulp.task("watch", function() {
// reload if gulpfile changed
var p;
function restart () {
if ( p ) {
p.kill();
console.log( Chalk.yellow.bold("gulpfile changed, deep-watch restart!") );
}
var spawn = require("child_process").spawn;
p = spawn("gulp", ["deep-watch"], {stdio: "inherit"});
}
watch( gulpfiles, restart ).on("error", function (e) {
console.log( Chalk.red(e.message) );
});
restart();
});


我覺得官方文檔的很多秘籍非常好

gulp-docs-zh-cn/recipes at master · lisposter/gulp-docs-zh-cn · GitHub (中文版本)

• 自動發布工作流
• 整合 streams 來處理錯誤
• 刪除文件和文件夾
• 使用 watchify 加速 browserify 編譯
• 增量編譯打包，包括處理整所涉及的所有文件
• 將 buffer 變為 stream (內存中的內容)
• 在 gulp 中運行 Mocha 測試
• 僅僅傳遞更改過的文件
• 從命令行傳遞參數
• 只重新編譯被更改過的文件
• 每個文件夾生成單獨一個文件
• 串列方式運行任務
• 擁有實時重載（live-reloading）和 CSS 注入的伺服器
• 通過 stream 工廠來共享 stream
• 指定一個新的 cwd (當前工作目錄)
• 分離任務到多個文件中
• 使用外部配置文件
• 在一個任務中使用多個文件來源
• Browserify + Uglify2 和 sourcemaps
• Browserify + Globs
• 同時輸出一個壓縮過和一個未壓縮版本的文件
• Swig 亦即 YAML front-matter 模板

既然問gulp和grunt，自然想到：

https://www.npmjs.com/package/gulp-grunt

grunt-cptpl支持各大主流模板引擎：artTemplate、 Handlebars 、Hogan 、 Underscore、 juicer、 doT、 kissy、 baiduTemplate。 對於不在此列的引擎，提供了自定義編譯方法介面。

grunt-cptpl會讀取每個模板文件的文本內容，用指定模板引擎的預編譯方法將其包裹起來，生成一個新的javascript文件。這個javascript文件文件裡面的內容，其實就是模板引擎的預編譯方法調用，傳入的參數為模板文件的文本內容。這樣我們就有了一個編譯好的模板函數，要渲染的時候把數據傳給它就好了。

歡迎一試哈~

gulp.task("new_view",function(name){
return gulp.src("templates/page.handlebars")
.pipe(template({name: name?name:"new"}))
.pipe(rename({
basename:name
}))
.pipe(gulp.dest("views"));
})

gulp.task("new",function (name,router) {
if(router)
return runsequence(["new_view","new_less","new_router","inject_app"]);
else
return runsequence(["new_view","new_less"]);
})


這些task可以生成對應名稱的頁面，樣式文件和配置路由，同時在app.js中註冊路由。

npm new --name newpage --router


useref，合併html中指定的js,css

補充一下：

var Proxy = require("gulp-connect-proxy");
...
// A local web server for dev convenience
gulp.task("server", function() {
connect.server({
root: "./dist",
port: 22532,
middleware: function (connect, opt) {
opt.route = "/proxy";
var proxy = new Proxy(opt);
return [proxy];
}
});
});


從編輯器複製來的，湊活看吧，，，

var gulp = require("gulp"),

sass = require("gulp-sass"),

sourcemaps = require("gulp-sourcemaps"),

server = require("gulp-server-livereload");

gulp.task("start", function() {

gulp.src("stylesheet/style.scss")

.pipe(sourcemaps.init())

.pipe(sass().on("error", sass.logError))

.pipe(sourcemaps.write("./map"))

.pipe(gulp.dest("./stylesheet"));

gulp.src("stylesheet/style2.scss")

.pipe(sourcemaps.init())

.pipe(sass().on("error", sass.logError))

.pipe(sourcemaps.write("./map"))

.pipe(gulp.dest("./stylesheet"));

});

gulp.task("default", ["webserver"], function() {

gulp.watch(["stylesheet/style.scss", "stylesheet/style2.scss"], ["start"])

.on("change", function(event) {

console.log("rebuild "+event.path);

});

});

gulp.task("webserver", function() {

gulp.src("./")

.pipe(server({

defaultFile: "index.html",

livereload: {

enable: true,

filter: function(filePath, cb) {

cb( !(/node_modules/.test(filePath)) );

}

}

}));

});

沒人回答？好，我來。

0 concat 基礎工具。一般來說我覺得它很有用，在開發環境中

1 cssmin 這個task比較牛，自動優化合併css，不是單單的壓縮，還有自動生成css patch，比如你寫transition類css3，會自動為你補上瀏覽器前綴。grunt-contrib 主力維護項目，之前還為它repo過issue

2 requirejs 如果是用AMD 的requirejs 做模塊載入器，首選它作為js壓縮工具，內置的r.js 是專門為requirejs設計的js合併壓縮parser，將define都合併到一個文件里。

3 imagemin node圖片壓縮首選，有幾級level優化，追求pref

front-end-separate

一個前後端分離的腳手架工具（自主研發）

為什麼選擇grunt而不是gulp

如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你

所有靜態資源都md5全並壓縮打包,css,js,img,html

已在生產環境驗證

基於express和grunt的前後端分離框架

模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標籤都簡化了

express提供路由服務

項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）

開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目

項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon

支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）

基於grunt md5 打包合併

線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）

###怎麼使用:

clone 代碼

啟動命令行:

如果沒有安裝grunt，請先全局安裝grunt bash $ npm i grunt-cli -g 安裝npm包(可能需要一段時間，請耐心等待)

$ npm i


開發模式(可以打開瀏覽器localhost:3001開始開發，埠配置文件里可以更改)

$ grunt


打包

$ grunt build


打包成CDN模式(config/config.js中可配置cdn路徑)

$ grunt buildCdn


browserSync(可以實現更改靜態資源自動刷新了)

$ grunt serve


瀏覽器輸入localhost:3001,你就可以看到漂亮的頁面了

打包命令 grunt build 會生成dist文件夾，裡面可以看到js、css都加了md5綴

tip:scss推薦用Webstorm自帶的File watch功能，非常方便（安裝node-sass即可）

-關於圖片精靈

$ grunt sprite 執行即可得到精靈圖片，如需配置請去config/grunt/sprite.js下配置更多的圖片精靈

在scss中引用@import 「sprite」 樣式中寫如:@include sprite($index_bg); 即可使用;

如果大家喜歡的話，請點一下star此項目或follow一下本人，即是對本人最大的支持

我會繼續完善這個項目的，並一直維護下去，如果有任何問題，歡迎在issues裡面提出

感謝大家支持!

——Nobody

在node中使用gulp，自動刷新browserSync，應該要怎麼引入 入口文件app.js ? -&> nodemon !

// 程序入口
gulp.task("nodemon", function (cb) {
var called = false;
return nodemon({
script: "app.js",
ext: "js",
ignore: ["public/**"],
env: {"NODE_ENV": "development"}
})
.on("start", function onStart() {
if(!called){cb();}
called = true;
})
.on("restart", function() {
setTimeout(function() {
console.log("-------- restart --------");
reload({stream: false});
}, 1000);
});
});
// 監聽變化
gulp.task("browser-sync", ["nodemon"], function(){
browserSync.init({
files: ["public/**","views/**"],
proxy: "http://localhost:3000",
port: 4000,
browser: ["/Applications/Google Chrome Canary.app/"],
notify: true,
});
});


前人的基礎上修改了一下，能做到：

默默打個廣告（內心：宣傳的好機會！）

"use strict";

gulp.task("default", function(cb) {
//使用 foal.run(...) 來執行帶參數（當然也可以不帶）的 foal 任務
foal.run(clean_some("test_path"), cb);
});


foal.run(task1("param"), [task2("param"), task3()], task4("param"), cb);


gulp-sequence地址: GitHub - teambition/gulp-sequence: Run a series of gulp tasks in order

關於foal.task(...)

foal.task("test", {
bindToFoal: true
}, function(param) {/*...*/});

foal.run(foal.test(param));


後端nodejs，項目構建工具grunt，模塊打包webpack。

之前，每次改動伺服器js代碼後，都要手動重啟伺服器，真是疼；

現在，一切都是自動化，一切都是所見即所得，以下 ，是我的app項目自動化配置。

var path = require("path");

module.exports = function (grunt) {

uglify: {

jshint: {

cssmin: {

filerev: {

express: {

webpack: {

watch: {

怒答一記～

1. 提取出來了，針對jsx(es6)，用到了babel browserify

2. 沒有添加css預處理，可以自行添加sass或者less...

3. uglify在最終build的時候把注釋去掉，就能用了喲～

github地址 : https://github.com/dcalsky/gulp-jsx-es6